CSS Grid

Grid lays elements out in two directions at once. You describe the columns and rows on the container, and the children take their places in them.

The practical difference from flexbox: with grid, the tracks exist before the content does. Every card in the third column is the same width because the column has a width, not because the cards happen to contain similar text.

.employee-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

• display: grid makes this a grid container. Its direct children become grid items and are placed automatically, filling each row before starting the next.
• grid-template-columns describes the columns. Here there are three.
• 1fr means one share of the space left after gaps and fixed sizes are taken out. Three equal shares give three equal columns — and unlike 33.33%, the fr unit already accounts for the gaps.
• repeat(3, 1fr) is shorthand for 1fr 1fr 1fr. With twelve columns you would notice the difference.
• gap spaces both rows and columns. gap: 24px 16px sets them separately, rows first.

.employee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 24px;
}

• Read it as an instruction: fit as many columns as you can, none narrower than 16rem, and share out anything left over.
• On a 1200px container that produces four columns. Around 800px it becomes three, then two, then one, at whatever widths the container actually reaches.
• Nothing here mentions a screen size. The layout responds to the space the grid has, so it still behaves when the same component is dropped into a narrow sidebar — something a media query based on viewport width cannot do.
• Choose the minimum from the content: what is the narrowest an employee card can be and still be readable? That number is the breakpoint, and it is a property of the card rather than of any device.

.directory-page {
  display: grid;
  gap: 24px;
  grid-template-areas:
    "filters"
    "results"
    "pagination";
}

.directory-filters {
  grid-area: filters;
}
.directory-results {
  grid-area: results;
}
.directory-pagination {
  grid-area: pagination;
}

@media (min-width: 48rem) {
  .directory-page {
    grid-template-columns: 15rem 1fr;
    grid-template-areas:
      "filters results"
      "filters pagination";
  }
}

• The quoted strings are a picture of the layout. Each string is a row, and each name inside it is a column.
• On a narrow screen the three regions stack. Each child says which area it belongs to, and nothing depends on its position in the markup.
• Above 48rem the picture changes to two columns, with filters spanning both rows because its name appears twice.
• This is the readable part: someone can see the layout in the stylesheet without mentally reconstructing it from line numbers.
• The markup order stays the same at both sizes, so the reading and tab order are unchanged. Grid can move things visually, and moving them a long way from their document order makes a page confusing to navigate by keyboard.