To make a two-dimensional layout, we’ll need to define the columns and rows.
For this example, we'll create three columns and three rows by using the grid-template-row and grid-template-column properties.
Let's take a look at the markup below and see what we are defining with these properties.
#grid {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
As we’ve written three values for grid-template-columns, we’ll get three columns.
Similarly, we’ll get three rows as we’ve specified three values for the grid-template-rows.
The values dictate how wide we want our columns to be (100px) and how tall we’d want our rows to be (100px).
With these values, our result is a 3x3 grid: