Grid Fundamentals

If flexbox is a single train track, CSS Grid is a chessboard. It gives you rows and columns at the same time, with named slots, fractional sizing, and gap support that's been there since day one. The moment your design has more than one axis of alignment, Grid is the right tool. Most modern dashboards, magazine layouts, and bento boxes are pure Grid under the hood.

The mental model: a sheet of graph paper

Set display: gridon a container and you've drawn a sheet of graph paper inside it. You then define how wide each column is, how tall each row is, and the browser places children into the cells. Children either drop in automatically (left-to-right, top-to-bottom) or you can pin them to specific cells.

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;  /* three columns */
  grid-template-rows: auto auto;          /* two rows, auto-sized */
  gap: 16px;
}

The fr unit: fraction of leftover space

The biggest single unlock in Grid is the frunit. It means "take this fraction of whatever space is left after fixed sizes are removed." So 1fr 2fr 1fr means a 1:2:1 ratio. The middle column gets twice as much as the others. No percentage math.

grid-template-columns: 1fr 1fr 1fr;       /* three equal columns */
grid-template-columns: 200px 1fr;          /* sidebar + flexible content */
grid-template-columns: 1fr 2fr 1fr;        /* middle is twice as wide */

repeat() saves you typing

Twelve equal columns? Don't write 1fr 1fr 1fr... twelve times. Use repeat():

grid-template-columns: repeat(12, 1fr);   /* a classic 12-col grid */
grid-template-columns: repeat(3, 200px);   /* three 200px columns */

minmax() and the auto-fit trick

Now the real magic. To build a card grid that automatically fits as many columns as the viewport allows, mixing repeat, auto-fit, and minmax:

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

Read it as: "repeat as many columns as fit. Each one is at least 240px wide, and grows to fill 1fr of leftover space." That one line is a responsive grid with no media queries.

Named lines and explicit placement

Grid lines are numbered starting from 1. You can pin an item to span specific lines:

.hero {
  grid-column: 1 / 4;   /* span from line 1 to line 4 (3 columns wide) */
  grid-row: 1 / 2;
}

/* Or use the span keyword */
.hero { grid-column: span 3; }

You can also name the lines themselves, which makes the layout readable later:

.layout {
  display: grid;
  grid-template-columns:
    [sidebar-start] 200px
    [sidebar-end content-start] 1fr
    [content-end];
}

.menu { grid-column: sidebar-start / sidebar-end; }
.main { grid-column: content-start / content-end; }

grid-template-areas: the ASCII-art layout

If you remember nothing else from this lesson, remember grid-template-areas. You literally draw your layout as a string and the browser does the rest:

.page {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "nav    main"
    "footer footer";
  min-height: 100vh;
}

.page > header { grid-area: header; }
.page > nav    { grid-area: nav; }
.page > main   { grid-area: main; }
.page > footer { grid-area: footer; }

Look at the string. You can see the layout. Change "nav main" to "main nav" and the sidebar moves to the right. It is the most intuitive layout syntax in any web technology, and it has been here for years.

Alignment in Grid

Grid has its own alignment vocabulary because items can be aligned inside their cell as well as the grid being aligned inside the container. The big four:

• justify-items aligns items horizontally inside their cells.
• align-items aligns items vertically inside their cells.
• justify-content distributes the whole grid horizontally (only matters if the grid is narrower than the container).
• align-content distributes the whole grid vertically.

Shorthand: place-items: center centers everything in their cells. place-content: center centers the whole grid in its container.

Build a bento layout

The trendy "bento box" layout (popularized by Apple marketing pages) is just Grid with mixed cell sizes. Edit the areas string to rearrange.

<!doctype html>
<html>
<head><link rel="stylesheet" href="styles.css"></head>
<body>
  <main class="bento">
    <section class="cell a"><h3>Big feature</h3><p>Two columns and two rows.</p></section>
    <section class="cell b"><h3>Stats</h3><p>1.2k stars</p></section>
    <section class="cell c"><h3>Made for speed</h3><p>200ms cold start.</p></section>
    <section class="cell d"><h3>Pricing</h3><p>From $0</p></section>
    <section class="cell e"><h3>Wide footer</h3><p>Three columns wide.</p></section>
  </main>
</body>
</html>

Quiz

Recap

• display: grid turns a container into a two-dimensional layout.
• fr = fraction of leftover space. The killer unit.
• repeat(auto-fit, minmax(240px, 1fr)) is the responsive grid recipe.
• auto-fit stretches items to fill; auto-fill keeps empty tracks.
• grid-template-areas draws the layout as ASCII art. Items are assigned with grid-area.
• place-items and place-content are the alignment shortcuts.