CSS grid part 1 – Why use CSS grid?

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.

Browser support

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.

Frameworks

Later, due to browser inconsistency and the advent of mobile devices, frameworks such as Bootstrap became popular.

Flexbox

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 course

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.

Leave a Reply

Your email address will not be published. Required fields are marked *