Grid: Columns, Rows & Placement

Master the 2D layout engine. Define precise architectural grids and explicitly place items exactly where you want them using line numbers.

CSS7 min readConcept 22 of 43

What it is

CSS Grid is a powerful **2-dimensional** layout system. While Flexbox is designed to align items along a single axis (either a row or a column), Grid is designed to handle both rows and columns simultaneously.

You define a grid on a parent container by specifying the size of its grid-template-columns and grid-template-rows.

Why it matters

Before Grid, building complex webpage architectures (like a Header spanning the top, a Sidebar on the left, a Main Content area, and a Footer at the bottom) required nesting dozens of flex containers or relying on fragile floats.

With CSS Grid, you can define that entire architecture on a single parent element, and simply tell the child items which grid cells they should occupy.

How it works

1. **The fr unit**: Grid introduces the fr (fractional) unit. grid-template-columns: 1fr 2fr 1fr; divides the space into 4 equal fractions, giving the middle column exactly twice the width of the outer columns.

2. **Grid Lines**: This is the most crucial concept. A grid is made of lines, not just tracks. A 3-column grid has **4 vertical lines** (start, between 1 and 2, between 2 and 3, and end).

3. **Item Placement**: You can explicitly place a child item using grid-column and grid-row. For example, grid-column: 2 / 4; tells the item to start at vertical line 2, and stretch until vertical line 4.

Try it

Define the parent grid tracks, then select the Hero item and adjust its line placements to watch it span across multiple columns and rows.

Grid Placement & Lines

Place the Hero Item

The grid is locked to 4 columns and 3 rows. Move the Hero item by changing its start and end lines.

Columns (Vertical Lines)

grid-column-start

2

grid-column-end

4

Rows (Horizontal Lines)

grid-row-start

2

grid-row-end

3
/* 1. The Parent Container */
.grid-container {
display: grid;
grid-template-columns: repeat(4, 60px);
grid-template-rows: repeat(3, 60px);
gap: 10px;
}
 
/* 2. The Hero Item Placement */
.hero-item {
grid-column: 2 / 4;
grid-row: 2 / 3;
}
1
2
3
4
5
1
2
3
4
HeroPlaced
1
2
3
4
5
6
7
8
iNotice the numbers? A 4-column grid doesn't just have 4 slots—it has 5 vertical lines that you can attach items to!

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1What is the primary difference between CSS Grid and Flexbox?
  2. 2If a grid has exactly 4 columns, how many vertical grid lines does it have?
  3. 3What does `grid-column: 2 / 4;` mean?

Remember this

  • Grid handles 2D layouts (rows and columns) simultaneously.
  • The fr unit distributes leftover space proportionally.
  • Grid placement is based on numbered lines, not just columns.
  • grid-column: 1 / -1 spans the entire width of the grid.

Done with this concept?

Mark it complete to track your progress. No login needed.