CSS Layout – Grid

Introduction

CSS Grid is one of the most powerful layout systems ever added to CSS. While Flexbox is designed for one-dimensional layouts (row or column), CSS Grid is designed for two-dimensional layouts—rows and columns together.

Grid is ideal for page layouts, dashboards, admin panels, image galleries, and complex responsive designs. Before Grid, developers used tables, floats, and complex Flexbox nesting to achieve layouts that Grid now solves cleanly and predictably.

In this chapter, you will learn:

• What CSS Grid is and why it exists
• Core Grid concepts and terminology
• Grid container vs grid items
• Rows, columns, gaps, and tracks
• Responsive grid layouts and real-world examples

What is CSS Grid?

CSS Grid is a two-dimensional layout system that allows you to design layouts using rows and columns at the same time.

.container {
  display: grid;
}

Once display: grid is applied, the element becomes a grid container, and its direct children become grid items.

Core Grid Terminology

Before writing Grid layouts, you must understand these terms:

• Grid lines: The vertical and horizontal lines dividing the grid.
• Grid tracks: The rows or columns.
• Grid cells: The smallest unit (intersection of row and column).
• Grid area: A rectangular area formed by multiple cells.
• Gap: The space between rows and columns.

Defining Structure

Defining Columns

Use grid-template-columns to define columns. fr represents a fraction of available space.

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
}

Defining Rows

Use grid-template-rows to define row heights.

.container {
  grid-template-rows: 60px auto 80px;
}

The repeat() Function

Cleaner code for repeating values.

/* Instead of 1fr 1fr 1fr */
grid-template-columns: repeat(3, 1fr);

Grid Gap

Adds spacing between items.

.container {
  gap: 20px; /* row-gap: 20px; column-gap: 20px; */
}

Placing Items

You can control exactly where items are placed using grid lines.

.item {
  grid-column: 1 / 3; /* Start at line 1, end at line 3 */
  grid-row: 1 / 2;
}

Shorthand using 'span'

.item {
  grid-column: 1 / span 2; /* Start at line 1, span 2 columns */
}

Grid Template Areas (Very Powerful)

Assign names to grid items and create a layout blueprint.

.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "sidebar content";
}

.sidebar { grid-area: sidebar; }
.content { grid-area: content; }

Used widely in admin dashboards and documentation sites.

Advanced Responsive Grid

Auto-Fit and minmax()

Create responsive cards without media queries.

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

This automatically adjusts columns and prevents elements from becoming too small.

Aligning Grid Items

justify-items: Horizontal alignment within the cell (start, center, end, stretch).

align-items: Vertical alignment within the cell.

justify-content / align-content: Aligning the entire grid within the container.

Grid vs Flexbox

Rule of thumb: Use Grid for main page structure, Flexbox for UI components (navbars, buttons).

Common Beginner Mistakes & Best Practices