Introduction to CSS Grids

Free CSS Developer Roadmap 2026 CSS roadmap for beginners Learn CSS step by step roadmap Responsive CSS learning path

A complete FREE CSS Developer Roadmap to master layouts, responsiveness, and animations.

The CSS grids Layout is a super powerful new layout system for the web. In comparison to Flexbox, Grids is two dimensional: you can line up content in both rows and columns at once.

1. The Core Concept

Using CSS Grids is pretty straightforward; you mark up a container element as a grid and then its direct decendants become grid items. Think of it as a piece of graph paper, and you determine if an element takes up specific spaces on it.

Basic Syntax

CSS

.container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr; /* Three columns */
  grid-template-rows: 100px auto;       /* Two rows */
  gap: 10px;                            /* Space between cells */
}

2. Key Terminology

Understanding the “anatomy” of a grid is essential for mastering it:

Grid Container: The element on which display: grid is applied.
Grid Item: The direct children of the container.
Grid Line: The dividing lines that make up the structure (vertical for columns, horizontal for rows).
Grid Track: The space between two adjacent grid lines (essentially a row or a column).
Grid Cell: A single “square” in the grid (the intersection of a row and a column).
Grid Area: A rectangular space surrounded by four grid lines; it can contain any number of cells.

3. Important Units & Functions

CSS Grid introduced new ways to calculate space:

The fr Unit: Represents a fraction of the available space in the grid container. 1fr 2fr means the second column will be twice as wide as the first.
repeat(): Saves time when defining many columns. repeat(3, 1fr) is the same as 1fr 1fr 1fr.
minmax(): Defines a size range. minmax(100px, auto) means a row will be at least 100px tall but can grow if the content is larger.

4. Positioning Items

You can tell a specific item exactly where to start and end using line numbers.

CSS

.item-1 {
  grid-column-start: 1;
  grid-column-end: 3; /* Spans across two columns */
  grid-row: 2 / 4;    /* Shorthand: starts at row line 2, ends at 4 */
}

5. Grid Template Areas

This is often considered the most “visual” way to build a layout. You can name sections of your grid and “draw” the layout in your CSS.

CSS

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

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

Why use Grid over Flexbox?

Flexbox is best for small-scale layouts or components where you want items to flow naturally (like a navigation bar).
Grid is best for large-scale layouts where you need precise control over the overall page structure in two dimensions.