Introduction to CSS Grids
CSS Grids are a way to arrange elements both horizontally and vertically. They are more advanced than flex, but more difficult to master.
To make a grid, you need to set the element's display property to grid:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
}
The element will then become a two-dimensional grid, with elements arranged vertically (columns) and horizontally (rows). The area where a column and row intersect is called a cell.
With the help of special properties it will be possible to place elements both in rows and in columns. This will allow you to easily do things like this:
In the next few lessons, we'll first learn how to arrange elements into columns, then move on to rows, and then put it all together.
