How to Use CSS Grid Layout: A Practical Guide With Real-World Examples

/ Uncategorized

If you have ever fought with floats, nested divs, or a tower of Flexbox containers just to align a card layout, this guide is for you. CSS Grid is the most powerful layout tool available to web developers today, and once you understand a handful of concepts, you can build production-ready layouts in a fraction of the time.

In this practical, code-first tutorial, we will cover how to use CSS Grid Layout to build the layouts you actually ship: page shells, card grids, dashboards, and responsive components that adapt without a single media query.

What Is CSS Grid Layout?

CSS Grid is a two-dimensional layout system for the web. Unlike Flexbox, which works along a single axis (row or column), Grid lets you control rows and columns at the same time. That makes it the right choice whenever your layout has structure in both directions.

You enable it with a single declaration:

.container {
  display: grid;
}

From there, you describe the grid using rows, columns, gaps, and named areas.

css grid layout code

CSS Grid vs Flexbox: When to Use Which

This is the most common question developers ask, so let’s settle it before writing more code.

Use Case Best Tool Why
Navbar items in a row Flexbox One-dimensional alignment
Full page layout (header, sidebar, main, footer) Grid Two-dimensional structure
Card gallery with equal columns Grid Predictable rows and columns
Form field row Flexbox Simple horizontal flow
Dashboard with widgets of different sizes Grid Precise placement on both axes

Rule of thumb: reach for Grid when you are designing the layout, reach for Flexbox when you are aligning content inside it. They are not rivals, they are teammates.

The Core Concepts You Need to Know

  1. Grid container: the element with display: grid.
  2. Grid items: the direct children of the container.
  3. Tracks: the rows and columns you define.
  4. Lines: the dividers between tracks, numbered starting at 1.
  5. Cells and areas: a single unit, or a rectangle made of several cells.

Fractional Units (fr) Explained

The fr unit represents a fraction of the available space. It is the secret to fluid layouts.

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 1rem;
}

This creates three columns where the middle one is twice as wide as the others, and they always fill the container.

The repeat() Function

Stop typing the same value over and over:

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
css grid layout code

Example 1: A Classic Page Layout With grid-template-areas

This is where Grid truly shines. You can literally draw your layout with ASCII-like syntax.

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 64px 1fr 48px;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100vh;
  gap: 1rem;
}

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

That is a full app shell in under 15 lines of CSS. Want to change the layout on mobile? You just rewrite the grid-template-areas, no markup changes needed.

Example 2: A Responsive Card Grid Without Media Queries

This is the single most useful Grid pattern you will learn. It uses auto-fit and minmax() to build a grid that reflows automatically.

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

Here is what is happening:

  • auto-fit: fit as many columns as possible.
  • minmax(260px, 1fr): each column is at least 260px wide and grows to fill remaining space.
  • The browser handles the breakpoints for you.

Try resizing the viewport and watch your cards rearrange themselves. No @media rules required.

auto-fit vs auto-fill

They look identical but behave differently when there are not enough items to fill the row:

  • auto-fit: collapses empty tracks and stretches the items.
  • auto-fill: keeps empty tracks reserved, so items stay their minimum size.

Example 3: An Editorial Magazine Layout

Need a hero article next to two smaller stories with a row of features below? Grid handles it cleanly.

.magazine {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: 1rem;
}

.feature-hero    { grid-column: span 4; grid-row: span 2; }
.feature-small-1 { grid-column: span 2; }
.feature-small-2 { grid-column: span 2; }
.feature-card    { grid-column: span 2; }

The span keyword tells each item how many columns or rows to occupy. You can also use line numbers like grid-column: 1 / 4 for explicit placement.

css grid layout code

Example 4: Centering Anything, Forever

The eternal CSS problem, solved in two lines:

.center {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

That’s it. Vertical and horizontal centering for any child element.

Best Practices for 2026

  • Start with the layout, not the markup. Sketch your grid first, then write semantic HTML.
  • Prefer named areas for page shells. They make your CSS self-documenting.
  • Use fr units for flexible space, fixed units for sidebars and rails.
  • Combine Grid and Flexbox. Use Grid for the page, Flexbox inside the cards.
  • Lean on subgrid when child grids need to align with parent tracks. It is now supported across all major browsers.
  • Use the browser DevTools grid inspector. Chrome, Firefox, and Safari all show line numbers and area names visually.
css grid layout code

Common Mistakes to Avoid

  1. Using Grid for one-dimensional layouts where Flexbox would be simpler.
  2. Forgetting that gap replaces margins between items, cleaner and more maintainable.
  3. Hardcoding column counts when auto-fit with minmax() would adapt automatically.
  4. Nesting unnecessary wrapper divs. Grid items are direct children only, so plan your DOM accordingly.

Putting It All Together

Once you internalize four patterns, fractional columns, named areas, auto-fit + minmax, and place-items: center, you can build roughly 90 percent of the layouts you will encounter on a real project. The remaining 10 percent come from combining these with subgrid and explicit line placement.

CSS Grid is not a shortcut, it is a complete rethink of how we describe layout on the web. The time you invest learning it pays off on every project that follows.

FAQ

Is CSS Grid easy to learn?

The basics can be picked up in an afternoon. display: grid, grid-template-columns, and gap are all you need for most card layouts. Advanced features like subgrid and explicit placement take a bit more practice, but the mental model is consistent.

Does CSS Grid replace Flexbox?

No. Grid is for two-dimensional layouts, Flexbox is for one-dimensional content alignment. You will use both in nearly every project, often together.

What is the 12 grid rule?

It refers to the convention of dividing a layout into 12 columns, popularized by frameworks like Bootstrap. Twelve divides evenly into 2, 3, 4, and 6 columns, which makes it flexible. With CSS Grid you are not bound to 12, you can use any number of tracks that suits your design.

Is CSS Grid supported in all browsers?

Yes. Grid has full support across all modern browsers, including subgrid, which reached universal support during 2024. You can use it in production without fallbacks for the vast majority of audiences.

Can I build a fully responsive site with CSS Grid and no media queries?

For many components, absolutely. The combination of repeat(auto-fit, minmax(...)) with fr units handles fluid layouts beautifully. For larger structural changes, such as switching from a sidebar layout to a stacked mobile layout, a single media query rewriting grid-template-areas is usually all you need.

What is subgrid and when should I use it?

Subgrid lets a nested grid inherit the tracks of its parent. It is invaluable when you need child elements, like card headers and footers, to line up perfectly across siblings. Use it whenever vertical or horizontal alignment must be consistent across independent grid items.