Hands-On UX Design for Developers

Grid-based layout

Only 2 years after the flexbox-based layout was introduced, the grid-based layout was introduced in 2011, but it took almost 7 years to be supported on almost all major browsers.

In 2018, the work for supporting grid-based layouts underwent a huge improvement, and it is supported on most well-known browsers.

Compared to flexbox-based layouts where we needed to add an extra div to use it, we do not need to add anything extra to the HTML in the grid-based layout, so we can easily remove the extra div that we added to the flexbox-based layout, that is, <div class="container"> .

We can easily start adding just CSS without the need to change the HTML structure or classes.

So, the new CSS using the grid-based layout properties ...