CSS Grid Introduction: Tracks, Gaps, and Fractional Units

Master the fundamentals of CSS Grid. Learn how to initialize 2D grids, define column/row tracks, apply grid gaps, and utilize the fractional unit.

Introduction

While Flexbox is a powerful tool for aligning items along a single axis (one-dimensional layout), it struggles when you need to align elements along both columns and rows simultaneously. Attempting to build complex, two-dimensional dashboard interfaces or gallery grids using nested flex containers often results in bloated, fragile markup.

To solve this, CSS3 introduced the CSS Grid Layout. Grid is a two-dimensional layout engine, meaning it can manage both columns and rows at the same time. By defining a grid skeleton on a parent container, you can position child elements precisely into distinct cells without depending on surrounding content sizes.

What You Will Learn

How to initialize a grid container using display: grid.
Setting up grid columns and rows using track properties.
Distributing track spaces using the fractional unit (fr).
Spacing out grid cells using the gap properties.
When to use CSS Grid vs. when to use Flexbox.

Prerequisites

CSS Flexbox Item Sizing: Flex Grow, Flex Shrink, and Flex Basis

Detailed Explanation: Grid Container and Tracks

Like Flexbox, CSS Grid operates on a parent-child structure:

Grid Container: The parent element that has display: grid declared.
Grid Items: The direct children of the container that are positioned inside the grid tracks.

Once a parent is defined as a grid container, you declare a set of grid tracks (columns and rows).

1. Defining Columns and Rows

You define the grid's columns and rows using grid-template-columns and grid-template-rows:

grid-template-columns: Defines the width of each column track.
grid-template-rows: Defines the height of each row track.

.grid-container {
  display: grid;
  /* Creates three columns of specified widths */
  grid-template-columns: 200px 300px 150px;
  /* Creates two rows of specified heights */
  grid-template-rows: 100px 100px;
}

2. The Fractional Unit (`fr`)

Instead of hardcoding pixel or percentage widths, CSS Grid introduces the Fractional Unit (fr). One fractional unit represents one share of the remaining free space in the grid container.

grid-template-columns: 1fr 1fr 1fr; Creates three columns of equal width, automatically scaling to fill the container.
grid-template-columns: 1fr 2fr 1fr; Creates three columns where the middle column occupies double the space of the outer columns.

$$\text{Column 2 width} = \text{Remaining Width} \times \frac{2}{4}$$

3. Grid Gaps (`gap`)

To separate columns and rows, use the gap property (formerly grid-gap). Unlike using margins on child elements, gap only places space between the grid cells, leaving no extra margins on the outer borders:

row-gap: Spaces rows vertically.
column-gap: Spaces columns horizontally.
gap: Shorthand representing vertical horizontal spacing (e.g. gap: 20px 10px;).

.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px; /* 20px of space between all columns and rows */
}

CSS Grid vs. Flexbox: Which to Use?

Visual Learning Diagram (Mermaid)

graph TD
    subgraph Grid 3x2 Matrix
    Cell1[Row 1, Col 1] --- Cell2[Row 1, Col 2] --- Cell3[Row 1, Col 3]
    Cell1 --- Cell4[Row 2, Col 1]
    Cell2 --- Cell5[Row 2, Col 2]
    Cell3 --- Cell6[Row 2, Col 3]
    end

Code Examples

Example 1: Standard 3-Column Blog Cards Grid

Build a card listing page that splits into three equal columns with spacing gaps:

.cards-layout {
  display: grid;
  
  /* Three responsive, equal-width column tracks */
  grid-template-columns: 1fr 1fr 1fr;
  
  /* Space out cards */
  gap: 24px;
}

.card-item {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  padding: 16px;
  border-radius: 8px;
}

Example 2: Classic Web Page Skeleton Grid

Define a header, main sidebar, content body, and footer structure:

.page-skeleton {
  display: grid;
  /* Side sidebar: 250px. Main content: fills remaining space */
  grid-template-columns: 250px 1fr;
  
  /* Header: 80px, Content: dynamic size, Footer: 60px */
  grid-template-rows: 80px auto 60px;
  
  min-height: 100vh;
}

/* Positioning specific items will be detailed in the next tutorial */

Best Practices & Common Mistakes

Mixing Percentages and Gaps: Avoid combining column percentage widths (grid-template-columns: 50% 50%;) alongside a horizontal gap (column-gap: 20px;). Under the default box model, the columns will occupy $100%$ width plus the $20\text{px}$ gap, causing horizontal overflow. Use fractional units (1fr 1fr) instead to let the browser calculate the width minus gaps automatically.
Unnecessary Nesting: Don't build grids by nesting dozens of flexboxes. If you need horizontal and vertical alignment, define a parent grid container instead.

FAQs

Q: Can I use float inside a CSS grid? A: You can, but applying float or clear to a child element inside a grid container has no effect. The grid container overrides floats on its items.

Q: What is the difference between grid-template and grid shorthands? A: grid-template is a shorthand for defining rows, columns, and areas. grid is a broader shorthand that also configures implicit grid properties (like grid-auto-flow).

Summary

CSS Grid structures two-dimensional layouts. Declaring display: grid on a parent initializes track column structures via grid-template-columns and row tracks via grid-template-rows. You can size columns using fractional fr units and space cells using gap.

Next Tutorial

How do we name sections of our grid to place items using clean keywords? Let's check: CSS Grid Areas.

← Back to Syllabus