CSS Grid complete

What is CSS Grid?

CSS Grid is a two-dimensional layout system that lets you control rows and columns at the same time. While Flexbox handles a single dimension, Grid gives you full control over both axes simultaneously.

It is activated with display: grid on the parent container.

Defining columns and rows

grid-template-columns and grid-template-rows

These define the structure of the grid:

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 200px;  /* 3 columns */
  grid-template-rows: auto 1fr auto;        /* 3 rows */
}

The fr unit (fraction)

fr represents a fraction of the available space. It is the Grid equivalent of flex: 1:

.grid {
  grid-template-columns: 1fr 2fr 1fr;
  /* First and third columns: 25% each */
  /* Second column: 50% */
}

The repeat() function

Simplifies the declaration of repetitive tracks:

.grid {
  grid-template-columns: repeat(4, 1fr);      /* 4 equal columns */
  grid-template-columns: repeat(3, 100px 1fr); /* Repeating pattern */
}

Grid areas: semantic layout

grid-template-areas lets you define the layout using names, like a visual map:

.page {
  display: grid;
  grid-template-areas:
    "header  header  header"
    "sidebar main   main"
    "footer  footer  footer";
  grid-template-columns: 250px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

Use a dot (.) to represent empty cells:

grid-template-areas:
  "header header header"
  ".      main   main"
  "footer footer footer";

Positioning items manually

You can place items in specific cells using line numbers:

.featured {
  grid-column: 1 / 3;  /* From line 1 to line 3 (spans 2 columns) */
  grid-row: 1 / 2;     /* First row */
}

/* Or with span */
.wide {
  grid-column: span 2;  /* Spans 2 columns from its current position */
}

Automatic responsive layouts

minmax() + auto-fill

The most powerful Grid combination for responsive layouts without media queries:

.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

This creates as many columns as will fit with a minimum of 280px each. If only one column fits, it takes up 100%.

auto-fill vs auto-fit

• auto-fill: creates columns even if they are empty
• auto-fit: collapses empty columns so that items stretch

/* 3 items in a 1200px container with minmax(200px, 1fr) */
/* auto-fill: creates 6 columns, 3 empty */
/* auto-fit: creates 3 columns that stretch to 400px each */

Gap: spacing between cells

.grid {
  gap: 1rem;          /* Same gap for rows and columns */
  gap: 1rem 2rem;     /* 1rem between rows, 2rem between columns */
  row-gap: 1rem;      /* Rows only */
  column-gap: 2rem;   /* Columns only */
}

Alignment in Grid

Aligning cell content

Aligning individual items

Aligning the entire grid

If the grid is smaller than its container:

Subgrid

subgrid allows a child item to inherit the tracks (rows or columns) of its parent grid. This is essential for aligning content across sibling cards:

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

With subgrid, the titles of all cards align at the same height, regardless of text length.

Now that you have mastered Grid and Flexbox, it is time to learn how to make your layouts adapt to any screen with responsive design.

Practice

1. Build a page layout with grid-template-areas: Create a layout with header, sidebar, main, and footer using grid-template-areas. Assign each section to its corresponding area.
2. Create a responsive gallery: Use repeat(auto-fill, minmax(250px, 1fr)) to build an image gallery that adapts automatically to the container width.
3. Experiment with subgrid: Create a 3-card grid using subgrid on rows so that the titles and descriptions of all cards align at the same height.