Grid rows and columns in CSS - Deep Dive

Overview - Grid rows and columns

What is it?

Grid rows and columns are the building blocks of CSS Grid Layout, a way to arrange content on a webpage in rows and columns. They let you divide a page into sections that line up neatly, like a table but more flexible. You can control the size and spacing of these rows and columns to create complex layouts easily. This helps make websites look organized and responsive on different screen sizes.

Why it matters

Without grid rows and columns, web layouts would rely on older, less flexible methods like floats or positioning, which are harder to manage and less adaptable. Grid rows and columns solve the problem of arranging content in a clean, predictable way that adjusts well to different devices. This means websites can look good and work well everywhere, improving user experience and saving developers time.

Where it fits

Before learning grid rows and columns, you should understand basic HTML structure and CSS properties like display and box model. After mastering rows and columns, you can learn about grid areas, grid template shorthand, and responsive design techniques using CSS Grid.

Mental Model

Core Idea

Grid rows and columns split a webpage into a flexible grid of horizontal and vertical lines that hold content in neat boxes.

Think of it like...

Imagine a city map with streets running north-south and east-west. The streets are like grid columns and rows, and the blocks between them are where buildings (content) sit.

┌─────────────┬─────────────┬─────────────┐
│   Row 1     │   Row 1     │   Row 1     │
├─────────────┼─────────────┼─────────────┤
│   Row 2     │   Row 2     │   Row 2     │
├─────────────┼─────────────┼─────────────┤
│   Row 3     │   Row 3     │   Row 3     │
└─────────────┴─────────────┴─────────────┘
  ↑           ↑             ↑
Column 1   Column 2     Column 3

Build-Up - 7 Steps

1

Foundation

Understanding CSS Grid Basics

Concept: Introduce the CSS Grid container and how it enables grid layout.

To use grid rows and columns, first set an element's display property to 'grid'. This turns it into a grid container. Inside it, child elements become grid items arranged in rows and columns automatically. Example: .container { display: grid; } This alone creates a grid with one column and as many rows as items.

Result

The container arranges its children in a single column by default.

Understanding that 'display: grid' creates a grid container is the foundation for controlling rows and columns.

2

Foundation

Defining Grid Columns

Concept: Learn how to set the number and size of columns using 'grid-template-columns'.

You can specify columns with 'grid-template-columns'. For example: .container { display: grid; grid-template-columns: 100px 200px 100px; } This creates three columns: first 100px wide, second 200px, third 100px. You can also use fractions (fr) to divide space proportionally: grid-template-columns: 1fr 2fr 1fr; This means the middle column is twice as wide as the others.

Result

The grid now has three columns with specified widths.

Knowing how to define columns lets you control horizontal layout precisely.

3

Intermediate

Defining Grid Rows

Concept: Learn how to set the number and size of rows using 'grid-template-rows'.

Similar to columns, you use 'grid-template-rows' to define rows: .container { display: grid; grid-template-rows: 50px 100px 50px; } This creates three rows with heights 50px, 100px, and 50px. You can also use 'auto' to let rows size based on content: grid-template-rows: auto auto auto;

Result

The grid now has three rows with specified heights.

Controlling rows lets you manage vertical spacing and alignment.

4

Intermediate

Using Fraction Units for Flexible Sizing

🤔Before reading on: do you think 'fr' units behave like percentages or fixed pixels? Commit to your answer.

Concept: Introduce the 'fr' unit as a flexible way to share available space among rows or columns.

'fr' stands for fraction of available space. Unlike pixels, it adapts to container size. Example: .container { display: grid; grid-template-columns: 1fr 3fr; } This means the second column is three times wider than the first, filling all space. If container width changes, columns resize proportionally.

Result

Columns resize dynamically based on container width.

Understanding 'fr' units is key to building responsive, flexible layouts.

5

Intermediate

Combining Rows and Columns for Grid Layout

🤔Before reading on: do you think rows and columns can be defined independently or must match in number? Commit to your answer.

Concept: Show how to define both rows and columns together to create a grid matrix.

You can set both rows and columns: .container { display: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 100px 200px; } This creates a grid with 3 columns and 2 rows. Grid items fill cells row by row by default.

Result

A grid with 6 cells arranged in 2 rows and 3 columns.

Knowing rows and columns work independently lets you create complex grids.

6

Advanced

Using Grid Line Numbers to Place Items

🤔Before reading on: do you think grid items can only fill cells in order, or can you place them anywhere? Commit to your answer.

Concept: Learn how to place grid items precisely using grid line numbers for rows and columns.

You can position items by specifying start and end lines: .item1 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; } This makes item1 span columns 1 and 2, and row 1. You can also use shorthand: .item1 { grid-column: 1 / 3; grid-row: 1 / 2; }

Result

Item1 spans two columns in the first row.

Knowing how to place items by grid lines gives full control over layout beyond automatic placement.

7

Expert

Implicit vs Explicit Grid Tracks

🤔Before reading on: do you think grid rows and columns must be fully defined upfront, or can the grid grow automatically? Commit to your answer.

Concept: Understand the difference between explicitly defined rows/columns and those created automatically when items overflow.

Explicit grid tracks are those you define with 'grid-template-rows' and 'grid-template-columns'. Implicit tracks are created by the browser when grid items are placed outside the explicit grid. You can style implicit tracks with 'grid-auto-rows' and 'grid-auto-columns'. Example: .container { display: grid; grid-template-columns: 100px 100px; grid-auto-rows: 50px; } If an item is placed in row 3, the browser creates that row automatically with 50px height.

Result

Grid can grow beyond defined rows and columns, keeping layout flexible.

Understanding implicit tracks prevents layout surprises and helps manage dynamic content.

Under the Hood

CSS Grid creates a two-dimensional coordinate system with horizontal lines (rows) and vertical lines (columns). Each intersection forms a grid cell. When you define 'grid-template-rows' and 'grid-template-columns', the browser calculates the size and position of each track. Grid items are then placed into these cells or span multiple cells based on their grid line assignments. The browser dynamically calculates available space and distributes it according to fixed sizes, fractions, or content size. Implicit tracks are added when items fall outside the defined grid, ensuring no content is lost.

Why designed this way?

CSS Grid was designed to solve the limitations of older layout methods like floats and tables, which were either one-dimensional or inflexible. The two-dimensional grid model allows designers to think in rows and columns simultaneously, matching how many layouts naturally work. The separation of explicit and implicit tracks gives both control and flexibility, letting developers define fixed parts of the layout while allowing growth. This design balances precision with adaptability, making complex layouts easier to build and maintain.

┌───────────────┬───────────────┬───────────────┐
│               │               │               │
│  Column 1     │  Column 2     │  Column 3     │
│               │               │               │
├───────────────┼───────────────┼───────────────┤
│               │               │               │
│   Row 1       │   Row 1       │   Row 1       │
│               │               │               │
├───────────────┼───────────────┼───────────────┤
│               │               │               │
│   Row 2       │   Row 2       │   Row 2       │
│               │               │               │
└───────────────┴───────────────┴───────────────┘
Explicit grid tracks defined by user

Implicit tracks added below if needed

Myth Busters - 4 Common Misconceptions

Quick: Do grid columns always have equal width by default? Commit to yes or no.

Common Belief: Grid columns are always equal width unless specified otherwise.

Reality: By default, grid columns size themselves based on content if no sizes are set, so they can be different widths.

Why it matters: Assuming equal widths can cause unexpected layout shifts and misaligned content.

Quick: Can you use percentages in 'grid-template-columns' to size columns? Commit to yes or no.

Common Belief: Percentages work the same way as in other CSS properties for grid columns and rows.

Reality: Percentages in grid-template-columns are relative to the grid container's size, but using 'fr' units is usually better for flexible layouts.

Why it matters: Misusing percentages can lead to confusing layouts that don't respond well to container resizing.

Quick: Does defining grid rows automatically create enough rows for all items? Commit to yes or no.

Common Belief: If you define fewer rows than items, the grid will not display items outside those rows.

Reality: The grid automatically creates implicit rows to hold extra items beyond the defined rows.

Why it matters: Not knowing this can cause confusion when items appear outside expected areas.

Quick: Is 'fr' unit the same as a percentage? Commit to yes or no.

Common Belief: 'fr' units behave exactly like percentages in grid layouts.

Reality: 'fr' units allocate remaining free space after fixed sizes, unlike percentages which are relative to container size regardless of other tracks.

Why it matters: Confusing 'fr' with percentages can cause layout sizing errors and unexpected spacing.

Expert Zone

1

Grid line names can be custom-defined to make placing items more readable and maintainable in large layouts.

2

Implicit grid tracks can cause performance issues if not controlled, especially with dynamic content creating many rows or columns.

3

Combining 'minmax()' with 'auto' and 'fr' units allows creating grids that adapt between minimum and maximum sizes smoothly.

When NOT to use

CSS Grid is not ideal for simple one-dimensional layouts where Flexbox is more efficient. Also, for very old browsers without Grid support, fallback layouts or Flexbox should be used.

Production Patterns

In production, grid rows and columns are used to build responsive page sections, dashboards, and complex components like image galleries. Developers often combine grid with media queries to adjust row and column sizes on different screen widths.

Connections

Flexbox

Complementary layout systems; Flexbox handles one-dimensional layouts, Grid handles two-dimensional.

Understanding Grid rows and columns alongside Flexbox helps choose the right tool for layout tasks, improving design flexibility.

Spreadsheet software (e.g., Excel)

Grid rows and columns mimic spreadsheet cells organizing data in rows and columns.

Knowing how spreadsheets organize data helps visualize CSS Grid's two-dimensional layout concept.

Urban city planning

Grid layout is inspired by city street grids dividing land into blocks.

Recognizing this connection helps understand why grids are intuitive for organizing space visually and functionally.

Common Pitfalls

#1 Defining grid columns but forgetting to set grid rows, causing unexpected row heights.

Wrong approach:

.container {
display: grid;
grid-template-columns: 100px 100px 100px;
}

.item1 {
grid-row: 2;
}

Correct approach:

.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px;
}

.item1 {
grid-row: 2;
}

Root cause:

Not defining rows means the browser creates implicit rows sized by content, which may not match expectations.

#2 Using fixed pixel sizes for all columns, making layout break on small screens.

Wrong approach:

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

Correct approach:

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

Root cause:

Fixed sizes ignore container width changes, harming responsiveness.

#3 Placing grid items without specifying grid lines, causing unexpected automatic placement.

Wrong approach:

.item1 {
/* no grid-column or grid-row specified */
}

Correct approach:

.item1 {
grid-column: 1 / 2;
grid-row: 1 / 2;
}

Root cause:

Relying on automatic placement can lead to items overlapping or appearing in wrong cells.

Key Takeaways

CSS Grid rows and columns create a two-dimensional layout system that organizes content in neat horizontal and vertical tracks.

You define rows and columns independently using 'grid-template-rows' and 'grid-template-columns' to control size and number.

Fraction units ('fr') allow flexible, proportional sizing that adapts to container size, enabling responsive designs.

Implicit grid tracks let the grid grow automatically when content exceeds defined rows or columns, keeping layouts flexible.

Precise placement of items using grid line numbers gives full control over complex layouts beyond automatic flow.