CSS Grid is a two-dimensional grid-based layout system whose goal is to introduce a modern and innovative approach to creating grids on our pages.
<aside> ⚠️ The prerequisite for this tutorial is to be familiar with HTML and CSS.
</aside>
Throughout the CSS history, different approaches were used to create grid layouts on our pages. Initially, developers used tables to create grid structures, then other approaches like floats and positioning. However, these methods weren't the easiest or the most efficient to use, and they lacked power and functionality when it comes to creating grid layouts.
A big change happened when Flexbox was introduced as a new way of creating one-dimensional layouts. That means it can handle creating either rows or columns separately, while CSS Grid is designed to directly handle two-dimensional layouts - both rows and columns at the same time.
In other words, that means CSS Grid can set horizontal and vertical relationships at the same time (two axes), while Flexbox handles horizontal or vertical layouts separately (one main axis). Since these technologies have different features and purposes, they can work together to create advanced page layouts.
Image source.
CSS Grid is meant to introduce a clear, powerful and efficient way for creating grid layouts, to replace the more convoluted approaches that were used in the past.
An example of a page layout that can be easily created with CSS Grid:
<aside> ℹ️ MDN page about CSS Grid can be found on this link.
</aside>
CSS Grid Layout is natively supported in most major browsers, but it's important to note that Internet Explorer supports an older version of this CSS module.
Overview of the CSS Grid support in current major browsers (as of February 2020):
You can find full browser support charts for CSS Grid on this page.
Before going any further, it's important to get familiar with the CSS Grid basics and terminology.