ReviseAlgo Logo

Layout

CSS Grid

Master CSS Grid Layout, covering grid templates, fractional (fr) units, responsive grids without media queries using minmax and auto-fit/auto-fill, and item placements.

Last Updated: July 15, 2026 • 12 min read

1. Learning Objectives

In this lesson, you will master two-dimensional page layouts using CSS Grid. By the end of this topic, you will be able to:

  • Define two-dimensional grid layouts using columns and rows.
  • Use fractional (fr) units to distribute space proportionally.
  • Build responsive layouts without media queries using repeat(), minmax(), and auto-fit/auto-fill.
  • Place and span grid items across multiple grid lines.
  • Control alignment inside grid cells.

2. Overview

CSS Grid is a two-dimensional grid-based layout system. Unlike Flexbox, which is designed for one-dimensional layouts (rows OR columns), CSS Grid is designed to handle rows AND columns simultaneously. This allows you to build complex, structured page layouts without requiring nested container elements.

3. Why This Topic Matters

CSS Grid simplifies building complex dashboard and application layouts:

  • Simplifies Responsive Layouts: Using properties like repeat(auto-fit, minmax(200px, 1fr)) allows you to create responsive grids that adapt to different screen sizes without writing complex media queries.
  • Prevents Nested Container Clutter: CSS Grid allows you to position elements anywhere on the grid, avoiding the need for heavily nested divs (div soup) to align items.

4. Real-World Analogy

Think of CSS Grid like **planning the layout of a city block**:

  • The Grid Container (The City Block): The total physical space plotted for development.
  • Grid tracks (Streets and Avenues): Drawing vertical avenues (columns) and horizontal streets (rows) to divide the block.
  • Fractional Units (fr - Land shares): Dividing land shares. A building given 2fr takes up twice as much land as a building given 1fr.
  • Spanning (Plots): A supermarket buying a large plot of land that spans across three avenues and two streets.

5. Core Concepts

CSS Grid calculations rely on grid lines and template sizing properties:

  • Grid Lines: The numbered lines dividing the columns and rows. Grid lines are 1-indexed, starting from the top-left corner of the container.
  • Fractional (fr) Unit: Represents a fraction of the remaining free space in the grid container.
  • auto-fit vs auto-fill:
    • auto-fit: Stretches grid items to fill the container's full width if there are empty slots.
    • auto-fill: Keeps empty grid track slots, preserving the declared item widths without stretching them.
Property Target Description
grid-template-columns Container Specifies the number and width of columns in the grid.
grid-template-rows Container Specifies the number and height of rows in the grid.
grid-column Item Sets the grid item's start and end coordinates (e.g. grid-column: 1 / 3).
minmax(min, max) Track Sizing Defines a size range that is greater than or equal to min and less than or equal to max.

6. Syntax & API Reference

Below is a CSS configuration for a responsive grid container that adapts to screen size without media queries:

7. Visual Diagram

This diagram displays grid track coordinate lines for a 3x2 grid:

8. Live Example — Full Working Code

A sample HTML document showcasing responsive columns and grid track positioning:

9. Interactive Playground

Try It Yourself Challenges:

  1. Change the dashboard columns property to use fractional units (grid-template-columns: 1fr 2fr 1fr) and note how the space is distributed.
  2. Test spanning a card vertically across rows by using the grid-row property (e.g. grid-row: span 2).

10. Common Mistakes

Mistake Why it happens Wrong Correct
Mismatched grid line counts Forgetting that grid lines are 1-indexed, or miscalculating the number of columns when spanning elements. grid-column: 1 / 3; (expects to span 3 columns) grid-column: 1 / 4; (spans 3 columns: lines 1 to 4)
Overusing grid-column: -1 with implicit columns Using `grid-column: -1` on a grid without explicitly defined columns. This only works on explicit grids. Implicit auto columns struggle with reverse indexing. Define columns explicitly before using reverse indexing (-1).

11. Best Practices

  • Use minmax and auto-fit for responsive grids: Build responsive columns using the repeat(auto-fit, minmax(200px, 1fr)) pattern to allow columns to wrap and scale automatically without media queries.
  • Spanning all columns: Use grid-column: 1 / -1 to make header and footer elements span across all columns in explicit grids.
  • Use gap for grid spacing: Always use the gap property to set spacing between grid items rather than using margins on individual child elements.
  • Select the right layout tool: Use Flexbox for simple, one-dimensional rows or columns (like toolbars or menus). Use CSS Grid for complex, two-dimensional layouts (like dashboards).

12. Browser Compatibility

Feature Chrome Firefox Safari Edge
display: grid support Supported (57+) Supported (52+) Supported (10.1+) Supported (16+)

13. Interview Questions

🟢 Q1: What is the main differences between auto-fit and auto-fill inside repeat(minmax()) column declarations?

Answer: auto-fit stretches grid items to fill the container's full width if there are empty slots. auto-fill keeps empty grid track slots, preserving the declared item widths without stretching them.

14. Debugging Exercise

Explain why the sidebar and header overlap, and fix the CSS configuration:

View Solution

Diagnosis: The .sidebar element is explicitly placed on row 1 (grid-row: 1 / 2). Since the header is also on row 1, the elements overlap in the same cell space. To resolve this, remove the explicit row placement from the sidebar to let grid autoflow position it on row 2, or declare the rows explicitly.

Fixed CSS:

15. Practice Exercises

Exercise 1: Photo Gallery Grid Layout

Build a photo gallery grid containing 6 images. Use the `repeat(auto-fit, minmax(200px, 1fr))` columns pattern to make the grid responsive across phone and desktop views.

16. Scenario-Based Challenge

The Responsive Admin Dashboard Challenge:

An admin portal dashboard requires a multi-column layout. On desktop displays, it needs a sidebar panel, header banner, search bar, and card grid widgets. On mobile screens, all elements should stack in a single column. Propose an implementation plan using CSS Grid.

17. Quick Quiz

Q1: Which fractional unit configuration sets three columns of equal width?

A) grid-template-columns: 1fr 1fr 1fr;

B) grid-template-columns: repeat(3, 100px);

C) grid-template-columns: 3fr;

Answer: A — Setting three 1fr columns divides the container width into three equal fractional units.

18. Summary & Key Takeaways

  • • CSS Grid is a two-dimensional layout model for rows and columns.
  • • Use repeat(auto-fit, minmax(width, 1fr)) to build responsive columns without media queries.

19. Cheat Sheet

Property Visual Layout Action
grid-column: 1 / -1; Spans the grid item across all columns from the first grid line to the last.