CSS Grid for Two-Dimensional Layouts

Lesson 11/30 | Study Time: 27 Min

Course: Complete Web Development - HTML, CSS, Javascript

CSS Grid is a powerful layout system designed to handle two-dimensional layouts, meaning it can control both rows and columns at the same time.

Unlike Flexbox, which focuses on a single direction, CSS Grid allows developers to design complete page layouts with precise control over structure and alignment.

It enables the creation of complex, responsive layouts using a clear grid-based approach, making it ideal for dashboards, galleries, and full-page designs.

With CSS Grid, elements can be placed exactly where needed without relying on floats or complex positioning.

Grid Container Basics

CSS Grid starts with a grid container—any element with display: grid. This creates invisible tracks (rows and columns) that child elements snap into. Browsers like Chrome 117+, Firefox 120+, and Safari 17+ offer full subgrid support as of 2025.

Key Properties live on the parent:

1. grid-template-columns: Defines column sizes

2. grid-template-rows: Defines row sizes

3. gap: Spacing between tracks (replaces margins)

Quick Start Example:

css

.grid-container {

  display: grid;

  grid-template-columns: 1fr 2fr 1fr; /* Three columns: equal, double, equal */

  grid-template-rows: 100px auto 50px;

  gap: 1rem;

}

Defining Grid Tracks

Grid tracks are the rows and columns forming your layout skeleton. Use flexible units like fr (fractional) for responsive designs that adapt to viewport size.

Column and Row Sizing Options

Choose from fixed, flexible, or pattern-based sizing:

Practical Example: Photo Gallery

css

.gallery {

  display: grid;

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

  gap: 1.5rem;

}

This auto-creates as many responsive columns as fit, perfect for Pinterest-style layouts.

The Explicit vs. Implicit Grid

1. Explicit: You define grid-template-*—full control

2. Implicit: Browser auto-generates extra tracks when content overflows

3. Control implicit: with grid-auto-rows: 200px or grid-auto-columns

Placing Grid Items

Grid items live inside the container and position via grid lines (the dividers between tracks). Lines are numbered starting at 1.

Grid Line Positioning

Use grid-column and grid-row shorthand:

1. Single line: grid-column: 1 (starts at line 1)

2. Span: grid-column: 1 / span 2 (line 1, spans 2 tracks)

3. Line-to-line: grid-column: 1 / 4 (lines 1 through 4)

4. Named areas: Covered later

Dashboard Layout Example:

css

.sidebar    { grid-column: 1; }

.main       { grid-column: 2 / 4; }

.footer     { grid-column: 1 / -1; } /* -1 = last line */

The grid-area Property

Shorthand combining row/column: grid-area: 1 / 2 / 3 / 4 (row-start / col-start / row-end / col-end).

Grid Areas and Named Templates

Named grid areas let you label sections like "header", "sidebar", then assign items by name. Perfect for complex, reusable layouts.

Creating Named Templates

Define areas with ASCII art in the container:

css

.dashboard {

  display: grid;

  grid-template-areas: 

    "header header header"

    "sidebar main  main"

    "footer footer footer";

  grid-template-columns: 250px 1fr;

  grid-template-rows: 80px 1fr 60px;

  gap: 1rem;

}

Then assign items:

css

.header    { grid-area: header; }

.sidebar   { grid-area: sidebar; }

.main      { grid-area: main; }

Pro Tip: Use single quotes around multi-line templates. Tools like CSS Grid Generator visualize this instantly.

Responsive Grid Patterns

Grid shines in responsive design with media queries and modern functions like clamp().

Mobile-First Responsive Techniques

1. Auto-fit columns

css

.items {

  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

}

2. Container queries (2025 standard)

css

@container (min-width: 400px) {

  .card { grid-column: span 2; }

}

3. Subgrid (Chrome 117+, Firefox 71+)

css

.card-grid {

  display: grid;

  grid-template-columns: subgrid;

}

Aligns nested grids perfectly with parents

Responsive Dashboard Example:

css

@media (max-width: 768px) {

  .dashboard {

    grid-template-areas: 

      "header"

      "main"

      "sidebar"

      "footer";

    grid-template-columns: 1fr;

  }

}