WEB DEVELOPMENT

Home › Glossary › Web Development· 120 ·

CSS Grid

\siː ɛs ˈɛs ɡrɪd\n.

Filed underWeb DevelopmentFront End

In brief · quick answer

CSS Grid is a two-dimensional layout system that enables precise control over rows and columns simultaneously, making it the definitive tool for page-level layouts.

§ 1 Definition

CSS Grid Layout is the first true two-dimensional layout system for the web. Before Grid, web developers hacked together page layouts using floats, tables, inline-blocks, and positioning. Grid replaces all of that with a declarative system that controls both rows and columns simultaneously. You define a grid container with `display: grid`, then specify your column and row tracks using `grid-template-columns` and `grid-template-rows`. You can size tracks with fixed units (px), flexible units (fr), auto, min-content, max-content, and minmax(). Items can span multiple tracks, overlap, and be placed explicitly or automatically. Grid supports named grid areas for visual mapping of layout regions. If you are building page-level layouts and not using Grid, you are working harder than you need to. Grid is supported in all modern browsers and has been since 2017.

§ 2 How it works

Define a grid container with `display: grid`. Use `grid-template-columns` to define column widths. Use `grid-template-rows` to define row heights. Use `gap` for gutters between tracks. Place items explicitly with `grid-column` and `grid-row`, or let the browser auto-place them. The `fr` unit distributes available space proportionally. `minmax(min, max)` sets a flexible range. `repeat(count, size)` avoids repeating values. Named grid areas via `grid-template-areas` map your layout visually in CSS.

§ 3 Grid vs. Flexbox

Grid is two-dimensional (rows and columns). Flexbox is one-dimensional (row OR column). Use Grid for page-level layout: headers, sidebars, main content, footers. Use Flexbox for component-level alignment: navigation items, card elements, centering. They work together. A common pattern is Grid for the page structure and Flexbox for content within each grid cell.

§ 4 Common misconception

CSS Grid is not "too complex" for everyday use. The basics (declaring columns, placing items, using gap) are simple and immediately useful. Advanced features like subgrid, masonry (proposed), and auto-flow are for edge cases. Start with `grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))` for the most useful responsive layout pattern. It works immediately and replaces all media query boilerplate for card grids.

§ 5 Note

The subgrid feature allows grid items to inherit the parent grid's tracks for alignment across nested components. It is supported in modern browsers and solves a long-standing pain point of nested grids.

§ 6 In code

```css
/* Page layout with grid areas */
.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
}

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

§ 7 Common questions

Q. Is CSS Grid ready for production?: A. Yes. CSS Grid has been stable and supported in all major browsers since 2017.
Q. Can I use Grid with older browsers?: A. Yes. Grid is resilient: older browsers without support will stack the content in source order (still readable and functional).

Key takeaways

CSS Grid is the first true two-dimensional layout system for the web.
Use Grid for page-level layouts and Flexbox for component-level alignment.
The `fr` unit and `minmax()` function create flexible, responsive layouts without media queries.

How Atomic Glue helps

Atomic Glue uses CSS Grid for robust, responsive page layouts. Our builds leverage Grid's power while maintaining graceful fallbacks. See our Website Development services.

Get in touch

# CSS Grid

CSS Grid is a two-dimensional layout system that enables precise control over rows and columns simultaneously, making it the definitive tool for page-level layouts.

Category: Web Development (also: Front End)

Author: Atomic Glue Team

## Definition

## How it works

## Grid vs. Flexbox

## Common misconception

## Note

## In code

## Common questions
Q: Is CSS Grid ready for production?
A: Yes. CSS Grid has been stable and supported in all major browsers since 2017.
Q: Can I use Grid with older browsers?
A: Yes. Grid is resilient: older browsers without support will stack the content in source order (still readable and functional).

## Key takeaways

CSS Grid is the first true two-dimensional layout system for the web.
Use Grid for page-level layouts and Flexbox for component-level alignment.
The `fr` unit and `minmax()` function create flexible, responsive layouts without media queries.

## Related entries

Last updated June 2026. Permalink: atomicglue.co/glossary/css-grid