CSS Grid Layout: Visual Guide for Developers

What Is CSS Grid?

CSS Grid Layout is a two-dimensional layout system designed for arranging content in rows and columns simultaneously. Unlike Flexbox (which works in one direction at a time), Grid handles both axes at once, making it ideal for page layouts, dashboards, galleries, and any design that involves a structured grid of content.

Grid was first supported by major browsers in March 2017 and has since reached universal support. It is not a replacement for Flexbox — the two systems complement each other. Grid excels at overall page structure and two-dimensional arrangements. Flexbox excels at distributing space within a single row or column. Most modern layouts use both.

The core concept is simple: you define a grid container, specify its column and row structure, and place child elements into the grid. The grid can be explicit (you define every track) or implicit (the grid creates tracks automatically as needed for the content).

Defining a Grid

Turn any element into a grid container with display: grid;. Then define your column and row tracks:

.layout {
display: grid;
grid-template-columns: 250px 1fr 1fr;
grid-template-rows: auto 1fr auto;
gap: 16px;
}

This creates a three-column grid: a fixed 250px sidebar and two flexible content columns that share the remaining space equally. The rows are: auto-height header, flexible-height main content, and auto-height footer. The gap property adds consistent spacing between all grid cells.

Track sizing units:

• px, em, rem: Fixed sizes. The track is exactly the specified width or height regardless of content or container size.
• fr (fraction): A flexible unit that distributes available space proportionally. 1fr 2fr gives the second column twice the space of the first.
• auto: Sizes to fit the content. The track grows to accommodate its largest item.
• minmax(min, max): Sets a size range. minmax(200px, 1fr) means at least 200px but grows to fill available space.
• repeat(): Shorthand for repeating track definitions. repeat(3, 1fr) is equivalent to 1fr 1fr 1fr. repeat(auto-fill, minmax(250px, 1fr)) creates as many 250px-minimum columns as will fit.

Placing Items on the Grid

By default, grid items are placed automatically in source order, filling each cell left to right, top to bottom. For more control, you can place items explicitly using line numbers or named areas.

Line-based placement: Grid lines are numbered starting at 1. Place an item by specifying its start and end lines:

.header {
grid-column: 1 / -1; /* spans all columns */
grid-row: 1;
}
.sidebar {
grid-column: 1;
grid-row: 2;
}
.content {
grid-column: 2 / 4;
grid-row: 2;
}

The -1 value refers to the last grid line, so 1 / -1 spans the full width regardless of how many columns exist.

Named grid areas: A more visual approach using grid-template-areas:

.layout {
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

This reads like a visual map of the layout. Each string is a row, each word is a column. Repeating a name spans that area across multiple cells. Using a dot (.) creates an empty cell.

Responsive Grid Patterns

Grid provides powerful tools for responsive layouts without media queries:

Auto-fill with minmax: grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); creates a responsive card grid. On a wide screen, four or five cards fit per row. As the viewport narrows, columns drop off and cards reflow to fewer columns. No media queries needed — the grid adapts continuously.

auto-fill vs auto-fit: Both create columns automatically, but they differ when the content does not fill all available columns. auto-fill creates empty columns to fill the space. auto-fit collapses empty columns, allowing existing items to stretch. For most card grids, auto-fill is the better choice.

Media queries for layout changes: When the layout structure itself needs to change (sidebar moves below content on mobile, three-column becomes single-column), media queries combined with grid-template-areas or grid-template-columns provide clean breakpoint transitions:

@media (max-width: 768px) {
.layout {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"content"
"sidebar"
"footer";
}
}

Alignment and Spacing

Grid provides precise control over how items align within their cells:

• justify-items: Aligns items horizontally within their cells. Values: start, end, center, stretch (default).
• align-items: Aligns items vertically within their cells. Same values as justify-items.
• justify-content: Aligns the entire grid within its container horizontally (when the grid is smaller than the container).
• align-content: Aligns the entire grid vertically within its container.
• place-items: Shorthand for align-items and justify-items. place-items: center; centers items both vertically and horizontally within their cells.

Individual items can override the container alignment using justify-self and align-self. This lets a specific item center itself while others stretch to fill their cells.

The gap property (shorthand for row-gap and column-gap) sets consistent spacing between grid cells without adding margins to individual items. This is cleaner than margin-based spacing because it does not add space at the edges of the grid.

Generate Grid Layouts Visually

Designing complex grid layouts by writing CSS alone can be challenging — you cannot see the result until you load the page. Our Grid Generator lets you build grid layouts visually by defining rows, columns, and areas in a graphical interface.

Set the number of columns and rows, adjust track sizes, draw named areas by clicking and dragging, configure gaps and alignment, and copy the generated CSS. The tool provides a live preview so you can see exactly how your layout will look before writing a single line of code.