Css Grid Layout 101

CSS Grid is now an established feature of CSS. Gone are the days when float was our only weapon to composing demanding layouts.

One of the fundamental questions that beginner developers ask themselves is what grid brings over flexbox. What is the difference between flexbox and grid? Sometimes, both strategies can solve the same problem, but there are problems that can only be solved with grid. Learning the basic qualities of grid will allow you to identify and solve them. As a general rule, if something can be easily solved with flexbox, we will opt for that path.

Fundamentally, flexbox can be explained as a strategy that defines a single layout (vertical or horizontal) of elements in the interface. It arranges elements in a row or column and controls the spacing between them. On the other hand, grid allows for the development of more complex layouts with additional dimensions, resembling more of a “matrix” style.

A container to rule them all 🔗

Just like flexbox, it is expected that there is a container that houses all the items that will make up the grid. If a more complex composition is needed, these items can in turn be grid containers themselves.

<div class="container">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
  <div class="d"></div>
</div>

grid-template 🔗

It is possible to define the spaces of the grid and have the children automatically occupy them based on those rules.

.container {
  display: grid;
  grid-template-columns: repeat(2, 100px); /* Three columns of 100px each. */
  grid-template-rows: repeat(2, 50px); /* Two rows of 50px each. */
  gap: 10px; /* Spacing between the cells. */
}

grid-template-areas 🔗

However, where I believe the true power lies is in the areas. Areas provide absolute freedom to create complex layouts. Areas are undoubtedly the most useful feature to remember from CSS Grid.

With this strategy, a matrix is defined with its spaces and identifiers, and then the child elements are identified with those identifiers so that they occupy their place in the matrix. The order of the children does not matter; grid will place them where they belong. The only thing to keep in mind is that the shapes of the areas must be rectangular.

.container {
  display: grid;
  grid-template-columns: repeat(4, 50px);
  grid-template-rows: repeat(4, 50px);
  grid-template-areas:
    "a a b b "
    "a a b b"
    ". c c ."
    "d d d d";
  gap: 10px;
}
.a {
  grid-area: a;
}
.b {
  grid-area: b;
}
.c {
  grid-area: c;
}
.d {
  grid-area: d;
}

grid-template-areas and sizes 🔗

Columns and rows in grid areas can indeed be given a size. Often, the unit ‘fr’ is used to distribute available space proportionally. For example, 1fr, 2fr. Elements with 2fr will take up twice as much space.

.container {
  display: grid;
  grid-template:
    "a a b b " 100px
    "a a b b" 1fr
    ". c c ." 1fr
    "d d d d" 1fr / 100px 80px 60px 40px;
  gap: 10px;
}
.a {
  grid-area: a;
}
.b {
  grid-area: b;
}
.c {
  grid-area: c;
}
.d {
  grid-area: d;
}