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:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#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.