Getting Started with CSS Grid: A Beginner's Guide to 2D Layouts

8 min read
CSS Grid Fundamentals (1/3)
Flat-design digital illustration introducing CSS Grid fundamentals, featuring icons for grid containers, tracks, and layout structures.
Flat-design digital illustration introducing CSS Grid fundamentals, featuring icons for grid containers, tracks, and layout structures.

Table of contents

The Power of CSS Grid for Layouts#

Modern web layouts are more dynamic and complex than ever. Whether it’s a blog, dashboard, or product grid, developers need layout systems that are both powerful and easy to use.

That’s where CSS Grid shines. Unlike Flexbox, which works in only one direction at a time, CSS Grid enables true two-dimensional layouts — rows and columns — without extra hacks or hassles.

This is the first post in a three-part series where we’ll break down CSS Grid from the ground up. You’ll learn the core concepts, understand key terminology, and build your first layout from scratch.

By the end of this post, you’ll be able to:

  • Define a grid container and grid items
  • Set up column and row templates
  • Use fractional units and spacing with gap
  • Build simple, scalable 2D layouts

Let’s dive in.

Why CSS Grid?#

Modern websites demand layout techniques that are flexible, responsive, and easy to maintain. Before Grid, developers relied on:

  • float, inline-block, or table-based layouts,
  • JavaScript (or jQuery) to measure and equalize heights,
  • Flexbox for 1D layouts, which wasn’t always ideal for grid-like structures.

But none of these offered full control over 2D layouts.

That’s where CSS Grid shines. Here’s why it’s a game changer:

Two-Dimensional Power#

Flexbox handles layout in one direction at a time — rows or columns. But CSS Grid enables layouts in both axes simultaneously.

Use case examples:

  • Product galleries
  • Dashboards
  • Magazine-style articles
  • Calendars
  • Full-page app layouts

Declarative, Clean, Predictable#

You define what the layout should look like, not how elements get there.

CSS 


1
2
3
4



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

The code is descriptive, like a wireframe.

Layout Without Extra Markup#

With floats or Flexbox, you often need wrapper divs, utility classes, or nesting. Grid reduces that. Your HTML becomes cleaner, while CSS handles layout logic in one place.

Built-In Layout Superpowers#

CSS Grid brings native support for layout patterns that once required complex CSS tricks—or even JavaScript—to implement.

  • Gaps (gap, row-gap, column-gap)
  • Auto item placement
  • Item spanning (grid-column, grid-row)
  • Template areas with named regions
  • Layered grid items

Naturally Responsive#

CSS Grid thrives in responsive design. With units like:

  • fr (fraction of available space)
  • minmax()
  • auto-fit, auto-fill

…you can build layouts that adapt seamlessly, without needing extra breakpoints.

CSS 


1



grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

Try doing that with Flexbox alone 😅

Not sure what does fr, auto-fit, minmax(), or auto-fill mean?
Don’t worry — we’ll cover all of these in depth in Part 3 → Responsive CSS Grid Layouts: fr Units, minmax(), auto-fill, and auto-fit Explained.

Component-Friendly#

In frameworks like React or Vue, Grid makes layout self-contained — no dependency on external wrappers or parents. It’s great for reusable components like:

  • Cards
  • Sidebars
  • Media objects
  • Complex page sections

Grid vs. Flexbox: When to Use What?#

Scenario Use Grid Use Flexbox
Page layout (header, sidebar, content) ✓ ✗
Navbar with links ✗ ✓
Gallery or card grid ✓ ✗
Single row of buttons ✗ ✓
Calendar or table layout ✓ ✗

Summary: Use flexbox for 1D layout (e.g., navbars, button groups) and use grid for 2D layout (e.g., pages, cards, dashboard panels) and you can always combine them!

When not to use CSS Grid?
  • If you just need a horizontal or vertical alignment — use Flexbox.
  • If the layout is linear and small-scale (e.g. tag chips, breadcrumbs), Grid might be overkill.
  • Old browser support? Flexbox may be safer. (Grid has great support though!)

Basic Terminology#

  • Grid Container: The parent element on which display: grid or display: inline-grid is applied. It defines the grid context for its children.
  • Grid Item: The direct child elements of the grid container. These are placed and aligned within the grid layout.
  • Grid Line: The horizontal or vertical dividing lines that separate grid tracks. They’re used for placing grid items.
  • Grid Track: A row or column in the grid. It’s the space between two adjacent grid lines.
  • Grid Cell: The smallest unit of a grid layout — the space at the intersection of a single row and column.

Building Layouts with CSS Grid#

Fundamental Properties#

  • display: grid; — Converts an element into a grid container, enabling grid-based layout for its direct children.
  • grid-template-columns — Defines the number and width of columns in the grid. You can specify fixed sizes, percentages, or use flexible units like fr (fraction of available space).
  • grid-template-rows — Defines the number and height of rows in the grid, using the same unit options as columns.
  • gap (or row-gap and column-gap) — Sets the spacing between rows and columns of grid items. A shorthand that simplifies layout spacing.
  • grid-column / grid-row — Specifies how many columns or rows an item should span, or where it should start and end within the grid.

Column and Row Templates#

CSS Grid gives you precise control over your layout’s structure using the grid-template-columns and grid-template-rows properties.

  • grid-template-columns — Defines the number and width of columns in the grid.
  • grid-template-rows — Defines the number and height of rows.

Each value you specify represents the size of a single column or row, ordered left-to-right (for columns) or top-to-bottom (for rows). You can use:

  • Flexible units like fr (fraction of available space),
  • Fixed units like px or em,
  • keywords like auto, which sizes based on content.

💡 Tip: You can use repeat() in grid-template-columns to reduce repetition: repeat(3, 1fr)

Here’s an example:

CSS 


1
2
3
4
5
6
7
8
9
10
11



.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* Three columns: middle column is twice as wide */
  grid-template-rows: 150px auto 75px; /* Three rows: fixed top & bottom, flexible middle */
  gap: 1rem;
}

.item {
  padding: 1rem;
  border: 1px solid #000
}

Here’s the HTML structure:

HTML 


1
2
3
4
5
6
7
8
9
10
11



<div class="grid">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
  <div class="item">Item 8</div>
  <div class="item">Item 9</div>
</div>

Explanation:

  • The grid has three columns: the first and third are equal in width, while the middle column is twice as wide.

  • The rows are defined as:

    • 150px → a fixed-height top row
    • auto → a middle row that adjusts to content
    • 75px → a fixed-height footer row

This layout gives you both predictability and flexibility, especially when paired with responsive design techniques.

👉 Try this on CodePen

Frequently Asked Questions (FAQ)#

When should I use Grid over Flexbox?#

Use CSS Grid when:

  • You need both rows and columns (2D layout).
  • You want consistent alignment across an entire section or page.
  • You’re building full-page layouts, dashboards, or card grids.

Use Flexbox when:

  • You’re arranging items in a single row or column.
  • You need precise content alignment or small-scale layout logic.

Is CSS Grid responsive?#

Absolutely! Grid works beautifully with:

  • Units like fr, auto, and minmax()
  • Functions like auto-fit and auto-fill
  • Media queries and even container queries

📌 Tip: We’ll explore responsive Grid techniques in depth in Part 3 → Responsive CSS Grid Layouts: fr Units, minmax(), auto-fill, and auto-fit Explained.

Does CSS Grid work in all browsers?#

✅ Yes, all modern browsers fully support CSS Grid.
⚠️ IE11 supports an older version, but it’s largely deprecated and not recommended for new projects.

Conclusion#

🎉 Congratulations — you’ve just taken your first steps into the world of CSS Grid!

Here’s a quick recap of what you’ve learned in this post:

  • Why CSS Grid is a game changer for modern layouts
  • The key differences between Grid and Flexbox
  • Core terminology: containers, items, tracks, and lines
  • How to define columns and rows using units like fr, px, and auto
  • How to build a clean, semantic, and scalable 2D layout from scratch

You now have a solid foundation to build upon — and this is just the beginning.

🔗 Up Next (Part 2): Mastering CSS Grid: Grid Areas, Item Alignment, and Spanning — we’ll dive deeper into advanced techniques like:

  • Naming and using grid areas
  • Aligning and justifying items
  • Spanning items across rows and columns
  • Understanding explicit vs. implicit grids

Stay tuned — you’re just one step away from turning your layout skills from good to great 💪

css beginner layout

I hope you’ve found this post informative and helpful. Thank you for reading!

This post is licensed under CC BY 4.0 by the author.