Why CSS Grid Matters

CSS Grid Layout fundamentally changed how we approach web layouts. Unlike Flexbox, which operates in a single dimension, Grid gives you control over both rows and columns simultaneously. This makes it the ideal choice for full-page layouts, card grids, and any design that requires precise two-dimensional placement.

Before Grid, developers relied on floats, tables, and various hacks to achieve complex layouts. These approaches were fragile and difficult to maintain. Grid replaces all of that with a clean, declarative syntax that makes your intentions clear.

Getting Started with Grid

To create a grid container, you simply apply display: grid to a parent element. From there, you define your columns and rows using the grid-template-columns and grid-template-rows properties.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

The fr unit is unique to Grid and represents a fraction of the available space. Using repeat(3, 1fr) creates three equal-width columns that automatically share the container's width.

Key Grid Properties

There are several properties that you will use frequently when working with Grid:

  • grid-template-columns and grid-template-rows define the track sizes for your grid
  • gap sets the spacing between grid items without adding margin to the edges
  • grid-column and grid-row let individual items span multiple tracks
  • grid-template-areas allows you to name regions of your grid for more readable layouts
  • justify-items and align-items control how items are positioned within their grid cells

Using Named Grid Areas

One of the most readable features of CSS Grid is named template areas. Instead of working with line numbers, you can assign names to regions of your layout.

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

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

This approach makes it immediately obvious how your layout is structured, and changing it later is as simple as rearranging the template string.

When to Use Grid vs. Flexbox

Grid and Flexbox are complementary tools, not competitors. Use Grid when you need to control layout in two dimensions or when the layout should be defined by the container. Use Flexbox when you are working in one dimension or when the content should dictate the layout. In practice, most projects benefit from using both together.