Why use CSS grid?
Prior to CSS grid, floats were used to create web page layouts. Below is a float based layout that uses clearfix to prevent content from breaking out of it’s box. There is also a wrapper div around the nav column. The layout as is, is not responsive. Grid removes any extra markup and makes this type of layout simple to achieive.
CSS grid is now supported by most browsers , some mobile browsers are not compatible. Grid should normally be used for larger screen sizes anyway and can be enabled using media queries.
Later, due to browser inconsistency and the advent of mobile devices, frameworks such as Bootstrap became popular.
Then came flexbox. flexbox can only be used in one direction at a time, either rows or columns. Both floats and flexbox needed extra markup to wrap items in a row or column.
The grid container
CSS grid is a two dimensional layout tool. It has several advantages over float based layouts. The containing element is turned into a grid container by setting the display property to grid. Below is a grid based layout, the markup is simpler and less cluttered. There is no need to nest elements and the display order can be changed in CSS. A mobile layout can have the footer under the header for example.
This series will provide a comprehensive guide to using CSS grid. Create responsive and beautiful layouts. In part two we look at how to create columns with CSS grid.