Peter Eagleton

Just like with the post that outlines the Flexbox steps, this page is more of a personal reference.

And credit goes to the course Modern HTML & CSS From The Beginning 2.0 by Brad Traversy.

Step 1: display-grid

The first step is to declare the Flexbox layout by the display:grid property:

display:grid;

Step 2: Columns

There are a number of ways you can set the widths if your columns

grid-template-columns: 100px 100px 100px;
grid-template-columns: 33.3% 33.3% 33.3%;
grid-template-columns: 1fr 1fr 1fr

You can also mix them, for example:

grid-template-columns: 500px 1fr 1fr

You can also write it as such:

grid-template-columns:repeat (3, 1fr);
grid-template-columns: repeat (3, 100px);

Another way:

grid-template-columns: repeat(3, minmax(200px, 300px));
grid-template-columns: repeat(3, minmax(200px, 1fr));

Step 3: Rows

Rows are done the same way (just replace “columns” with “rows”).

The following will make all the rest of the rows a certain size:

grid-auto-rows: 100px;

Step 4: Gaps

You can also add gaps between different parts of the grid:

grid-row-gap: 20px;
grid-column-gap: 20px;
gap: 20px;

Step 5: Grid content alignment

The term justify refers to alignment along rows, while align refers to alignment along columns.

justify-content: start;
justify-content: end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;

Justify-items: start;
Justify-items: end;
Justify-items: center;
Justify-items: stretch;

align-content: start;
align-content: end;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: space-evenly;

align-items: start;
align-items: end;
align-items: center;
align-items: stretch;

You can also align both at one:

place-items: xxx;
place-content: xxx;

Step 6: Automatic fitting

You can also automatically fit items to the length of the container (so there is no space at the ends):

grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

Step 7: Flexible grid positioning

You can also customise the grid layout by adjusting the size and position of items, rather than having each item uniformly aligned along the x and y axes:

.item-1 {
  grid-column: 1 / 4;
}

.item-5 {
  grid-row: 3 / 5;
}

.item-8 {
  grid-column: 2 / 4;
}

.item-9 {
  grid-column: 1 / 4;
}

You can also do it as such:

.item-1 {
  grid-column: 1 / span 3;
}

.item-5 {
  grid-row: 3 / span 2;
}

.item-8 {
  grid-column: 2 / span 2;
}

.item-9 {
  grid-column: 1 / span 3;
}

Step 8: Grid Template Areas

.container {
  display: grid;
  gap: 1rem;
  grid-template-areas:
    "header header search "
    "nav nav nav"
    "main main aside"
    "footer footer footer";
}

grid-area: header;