CSS Grid Layout: A Complete Beginner's Guide to Modern Web Layouts

What Is CSS Grid and Why Does It Matter?

CSS Grid is a two-dimensional layout system built directly into modern browsers. Unlike older approaches — floats, inline-blocks, or even Flexbox — Grid lets you control both rows and columns simultaneously, making complex layouts dramatically easier to build and maintain.

If you've ever wrestled with a layout that "almost works" in CSS, Grid is likely the tool you've been missing.

Setting Up Your First Grid

Getting started takes just two lines of CSS:

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

This creates a three-column grid where each column takes an equal share of the available space. The fr unit (fraction) is your best friend in Grid — it distributes space proportionally without needing to calculate percentages.

Key CSS Grid Properties You Need to Know

Defining Columns and Rows

• grid-template-columns — defines the number and width of columns
• grid-template-rows — defines the number and height of rows
• gap (formerly grid-gap) — sets the space between cells

Placing Items

• grid-column — controls which columns an item spans
• grid-row — controls which rows an item spans
• grid-area — assigns an item to a named template area

The repeat() Function and auto-fill

Typing out column definitions manually gets tedious. The repeat() function cleans this up:

grid-template-columns: repeat(3, 1fr);

Even better, use auto-fill with minmax() for truly responsive grids that require zero media queries:

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

This creates as many columns as fit, each at least 250px wide. Resize the browser — the grid adapts automatically.

Named Template Areas

One of Grid's most powerful features is the ability to name areas of your layout and assign elements to them visually:

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

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

The grid definition literally draws your layout in your stylesheet. This makes code highly readable and easy to modify.

CSS Grid vs. Flexbox: Which Should You Use?

Feature	CSS Grid	Flexbox
Dimensions	2D (rows + columns)	1D (row or column)
Best for	Page layouts, complex structures	Component-level alignment
Item placement	Precise, grid-based	Flow-based
Browser support	Excellent	Excellent

The short answer: use Grid for layout, use Flexbox for components. They work beautifully together.

Browser Support

CSS Grid is supported in all modern browsers — Chrome, Firefox, Safari, and Edge. For the vast majority of projects today, you can use Grid without any fallbacks or workarounds.

Next Steps

1. Open your browser's DevTools — Grid inspection tools in Chrome and Firefox are excellent for visualising your grids.
2. Rebuild a simple layout you've made before using Grid — notice how much less code you need.
3. Experiment with grid-template-areas for a full page layout.

CSS Grid is one of the most impactful tools in a web designer's toolkit. Investing a few hours to learn it properly will save you countless hours on every project that follows.