Grid

When to use grid

Display grid is a less flexible alternative to flexbox. It is designed to create two-dimensional grid layouts. The display: grid property allows be more intentional about the layout of the elements and their order.

/* Syntax to use grid */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "a a" "b b";
  gap: 8px;
}

Grid template columns and rows

The grid-template-columns and grid-template-rows properties define the size and layout of the grid. Both properties accept a space-seperated list of values in any length unit (px, em, rem, etc.) as well as grid-specific keywords and units.

The grid-template-columns property sets the width of each grid column whereas the grid-template-rows property sets the height of each grid row.

.grid-container {
  display: grid;
  grid-template-columns: 4rem 8rem;
  grid-template-rows: 4rem 8rem;
  gap: 8px;
  padding: 8px;
  background-color: lavender;
}

.grid-item {
  background-color: lightgreen;
  padding: 8px;
}

The fr unit

The fr unit works similarly to flex-grow in flexbox. It defines what fraction of the remaining space the grid item should take up. The auto keyword behaves just like 1fr.

.grid-container {
  display: grid;
  grid-template-row: 4rem 1fr;
  grid-template-columns: 8rem auto;
  gap: 8px;
  padding: 8px;
  width: 200px;
  height: 200px;
  background-color: lavender;
}

.grid-item {
  background-color: lightgreen;
  padding: 8px;
}

Grid column and row

You can place items on the grid by using the grid-column and grid-row properties. The grid-column defines from which column the item should start and end, and the grid-row defines from which row the item should start and end.

Grid rows and columns are numbered from 1 (top and left edge) to n (number of columns and rows, ends at the bottom and right edge).

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

.placement-1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.placement-2 {
  grid-column: 2 / 4;
  grid-row: 1 / 2;
}

.placement-3 {
  grid-column: 1 / 3;
  grid-row: 2 / 4;
}

.placement-4 {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
}

Grid template areas

You can spicify areas within the grid using the grid-template-areas property. To define column areas, you must match each column defined in the grid-template-columns property with a custom name and surround the column row with quotes (e.g. grid-template-areas: "first-column second-column"). To specify more rows, repeat the process and seperate the column statements with a space (e.g. grid-template-areas: "column-1-row-1 column-2-row-1" "column-1-row-2 column-2-row-2").

Once defined on the contianer, you can place items on the grid by using the grid-area property.

.grid-container {
  display: grid;
  grid-template-columns: 4rem 8rem;
  grid-template-rows: 4rem 8rem;
  grid-template-areas: "a a" "b c";
  background-color: lavender;
}

.area-a {
  background-color: lightgreen;
  grid-area: a;
}

.area-b {
  background-color: lightblue;
  grid-area: b;
}

.area-c {
  background-color: lightpink;
  grid-area: c;
}