Summary of “Creating layouts using grids”

We use the grid-template-columns and grid-template-rows properties to assign a particular number of columns and rows to the grid.

The grid-template-columns property lists the number and width of future grid columns:

/*
Assign three columns to the grid,
The first has a width of 100px,
The second has a width of 200px,
And the third is 300px in height.
*/

.element {
  grid-template-columns: 100px 200px 300px;
}

The grid-template-rows property works similarly to grid-template-columns, only it tells the grid how many rows it will contain and what height they will be:

/*
Assign three rows to the grid,
The first has a height of 100px,
The second has a height of 200px,
And the third is 300px in height.
*/

.element {
  grid-template-rows: 100px 200px 300px;
}

It is also possible to set a non-fixed size to grid cells. The auto value exists for this:

/*
Assign two columns to the grid,
The first has a non-fixed width,
And the second has a width of 100px.
*/

.element {
  grid-template-columns: auto 100px;
}

/*
Assign three rows to the grid,
The first has a height of 100px,
The second has a non-fixed height,
And the third has a height of 200px.
*/

.element {
  grid-template-rows: 100px auto 200px;
}

Given the properties that we assigned to grid-template-columns and grid-template-rows, the grid items can be inserted into a given grid automatically. At the same time, some of the grid items can also have clear coordinates in the grid. By combining the task of assigning explicit positions to grid items and automatically positioning them, we are able to create complex and flexible grids at the same time.

Another mechanism for creating grid layouts is to use the grid-template-areas and grid-area properties. When it is assigned as the value of the grid-template-areas property, it describes the grid structure visually “cell-by-cell”.

Example:

HTML:

<div class="grid-container">
  <div class="grid-element-1"></div>
  <div class="grid-element-2"></div>
  <div class="grid-element-3"></div>
</div>

CSS:

.grid-container {
  grid-template-areas:
    "red yellow green"
    "red yellow green"
    "red yellow green";
}

.grid-element-1 {
  grid-area: red;
}

.grid-element-2 {
  grid-area: yellow;
}

.grid-element-3 {
  grid-area: green;
}

The grid-template-areas property allows certain grid areas to be marked as empty. The period character . is used for this instead of the alphabetic name of the area.

.grid-container {
  grid-template-areas:
    ".   .      green"
    "red yellow green"
    "red yellow green";
}

The gap property allows you to add uniform spacing between rows and columns. If you only want to add spacing between rows, then use the row-gap property, whereas column-gap is only used to specify spacing between columns.

.grid-container {
  gap: 10px; /* Spacing of 10px between rows and columns */
  column-gap: 20px;  /* Spacing of 20px between columns */
  row-gap: 30px;  /* Spacing of 30px between rows */
}