CSS grid and it's Benefits

Over the past few years CSS grid systems have grown a lot in popularity. After landing in browser in early 2017, it quickly becoming considered best practice for rapid layout scaffolding. Until then you will need to enable grid for it to work.

So, what is a CSS grid system?

In basic terms, a css grid system create a structure that allows for content to be stacked both vertically and horizontally in a consistent and easily manageable fashion. Grid and flexbox can act in similar ways. You may have seen people using flexbox to construct grid systems but that's not what flexbox was designed for.

CSS Grid layout excels at dividing a page into major regions, or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.

Like tables, grid layout enables an designer to align elements into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables.

Benefits of CSS grid

  1. Versatile - CSS grid solves a big problem by allowing designers to control both columns and rows simultaneously. They even support nested grids for more complex use cases.
  2. Increase productivity - CSS grid providing simple and predictable layout scaffolding to HTML design. The structure of a page can be formulated quickly without second guessing its precision or cross-browser compatibility.
  3. Best for responsive - Grid system make it incredibly easy to create mobile friendly interfaces that are adaptable to different sized viewports.
  4. Reduce complex codes - Playing with float or inline-block are time consuming and increase code size, which become unmanageable for big projects. Grid layout make it simple and manageable easily.
  5. Create complex structure - Using CSS grid layout you can create a complex and a beautiful structure, which totally unimaginable earlier.

Basics and Browser Support

To get started you have to define a container element as a grid with display: grid, set the column and row sizes with grid-template-columns and grid-template-rows, and then place its child elements into the grid with grid-column and grid-row.

In case of browser support, after March 2017, many browsers shipped with CSS grid: Chrome, Firefox, Safari, and Opera. Internet Explorer 10 and 11. Edge support has been announced, but it's not here yet.