Why Grid rows and columns in CSS? - Purpose & Use Cases

The Big Idea

Discover how to make your webpage layouts smart and effortless with grid rows and columns!

The Scenario

Imagine you want to arrange photos on a webpage in neat rows and columns, like a photo album. You try to place each photo by setting exact positions with margins and padding.

The Problem

If you add or remove photos, you must adjust every margin and position manually. It's slow, confusing, and easy to make mistakes that break the layout.

The Solution

CSS Grid lets you define rows and columns easily. You just tell the browser how many rows and columns you want, and it arranges items automatically, adjusting when you add or remove content.

Before vs After

✗ Before

img { margin-left: 10px; margin-top: 20px; /* manual spacing for each photo */ }

✓ After

.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; gap: 1rem; }

What It Enables

You can create flexible, clean layouts that adapt automatically to different screen sizes and content changes.

Real Life Example

Online stores use grid rows and columns to show products in neat rows that adjust when you filter or add new items.

Key Takeaways

Manual positioning is slow and error-prone.

Grid rows and columns automate layout arrangement.

Layouts become flexible and easy to maintain.