Grid Columns
To control the number of vertical columns in the grid, use the grid-template-columns property. This property defines both the number of columns and the width of each one. The columns are simply listed from left to right:
.container {
display: grid;
border: 3px solid #007bff;
grid-template-columns: 100px 100px 100px;
}
Often, it's more practical to write the width as a percentage of the total available width instead of using pixels. Here's an example:
.container {
display: grid;
border: 3px solid #007bff;
grid-template-columns: 10% 60% 30%;
}
Another unit we can use is "fr", for fraction. For example, to make the first and second columns the same size, and the third twice as large as either of them, we'd write grid-template-columns: 1fr 1fr 2fr;. The columns will be automatically scaled so that together they take up all of the grid's available width.
You can also write "auto" for any or all of the column/row inputs, in which case the auto columns/rows will all take up the same amount of space, and fill the width of the grid. Try it!
Grid Rows
To set the number of rows and the size of each, use the grid-template-rows property.
.container {
display: grid;
border: 3px solid #007bff;
grid-template-columns: 10% 60% 30%;
grid-template-rows: 200px 100px;
}
All of the same units that work for grid-template-columns also work here.
Gaps
To add spacing between rows, use the grid-row-gap property, and to add space between columns, use grid-column-gap, like this:
.container {
display: grid;
border: 3px solid #007bff;
grid-template-columns: 200% 200% 200%;
grid-template-rows: 200px 100px;
grid-row-gap: 20px;
grid-column-gap: 10px;
}
Those two properties are useful when you want to change either the row or the column gap, but if you want to change both, it's more efficient to use the grid-gap property, where the first input is the row gap, and the second is column gap. The example above can be rewritten as grid-gap: 20px 10px;