CSS Grid Layout

CSS Grid Layout gives you a two-dimensional system for arranging content in rows and columns. It works well for page regions, galleries, dashboards, forms, and card collections where items must align in both directions.

A grid starts with a container. Its direct children become grid items, while deeper descendants keep their normal layout unless you create another grid or use subgrid.

Create a CSS Grid Container

Set display: grid, define column tracks, and add space with gap. The fr unit represents a share of the available space.

Example:

.dashboard {
  /* Create one narrow column and one flexible column. */
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
}

Understand Grid Terms

Build Equal Columns with repeat()

The repeat() function avoids repeating the same track size. You can mix fixed, content-based, and flexible sizes.

.gallery {
  display: grid;
  /* Create three columns with equal available width. */
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

Create a Responsive Grid Without Media Queries

Combine auto-fit with minmax() to add as many columns as the container can hold. Each card stays at least 210 pixels wide and expands to fill remaining space.

Run this responsive example:

<main class="card-grid">
  <article class="card">Design</article>
  <article class="card">Build</article>
  <article class="card">Test</article>
  <article class="card">Ship</article>
</main>

<style>
.card-grid {
  /* Fit useful columns automatically. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
}
</style>

auto-fit collapses empty repeated tracks, so existing items can stretch. auto-fill keeps those track slots, which can leave reserved space.

Place Items with Grid Lines

Grid lines start at 1. Negative numbers count backward from the far edge. Use span when the number of tracks matters more than the exact ending line.

.featured-card {
  /* Start at column line 1 and cover two columns. */
  grid-column: 1 / span 2;
}

.page-footer {
  /* Stretch from the first to the final column line. */
  grid-column: 1 / -1;
}

Create Readable Layouts with Named Areas

Named areas make the structure visible in your stylesheet. Every quoted row must contain the same number of cells, and each named area must form a rectangle.

.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 220px 1fr;
  gap: 20px;
}

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

Control Implicit Tracks

Items that do not fit in the explicit grid create implicit tracks. Control their size and direction with grid-auto-rows, grid-auto-columns, and grid-auto-flow.

.schedule {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Automatically created rows are at least 90px high. */
  grid-auto-rows: minmax(90px, auto);
}

Align Grid Content and Items

justify-items aligns items across the inline axis, while align-items controls the block axis. Their content counterparts position the complete grid inside extra container space. Use place-items as a concise pair.

.logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 120px);
  /* Center each logo inside its grid area. */
  place-items: center;
  justify-content: center;
}

Use Subgrid for Nested Alignment

A regular nested grid sizes its own tracks independently. Set grid-template-columns: subgrid or grid-template-rows: subgrid when a nested grid must reuse the parent tracks. Subgrid has broad modern-browser support, but you should still test the browsers required by your project.

.card-list { display: grid; grid-template-columns: repeat(3, 1fr); }
.card { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
/* Card headings, content, and actions now share row alignment. */

Grid can visually reposition items, but keyboard and screen-reader navigation generally follows the document order. Keep the HTML order meaningful and avoid using placement only to repair poor markup.

CSS Grid and Flexbox

Use Grid when rows and columns work together as a layout system. Use Flexbox when content mainly flows along one axis. They complement each other: a page can use Grid for major regions and Flexbox inside a navigation bar or card.

Common Grid Mistakes

• Applying grid properties to a child when they belong on the container.
• Using rigid pixel columns that overflow narrow screens.
• Forgetting that only direct children become grid items.
• Confusing item alignment with alignment of the complete grid.
• Changing the visual order in a way that conflicts with the document order.

Conclusion

CSS Grid provides precise two-dimensional layout with tracks, lines, areas, automatic placement, alignment, and responsive sizing. Start with a simple explicit grid, use repeat() and minmax() for flexible layouts, and add named areas or subgrid only when they improve clarity.