Grid Item Placement - How to Control Layouts in CSS Grid

Hi everyone!
Welcome back to our CSS Grid series on Dindin Design! In the previous article, we explored how to size our grid columns and rows using fr, px, minmax(), and more. Now that we know how to set up a grid, it’s time to take it to the next level — by learning how to place elements inside the grid.

In this article, we’ll learn Grid Item Placement — how to position and span items across your grid using properties like grid-column, grid-row, and grid-area. You’ll also learn how Flexbox and Grid can work together, and how to create overlapping layouts.

What You’ll Learn

Key Grid terminology: tracks, lines, cells, and items
How to place grid items using grid-column, grid-row, and grid-area
How to span items across multiple tracks
Centering content inside grid items using Flexbox
How to create overlapping layouts

Grid Basics Refresher

Before diving into placement, let’s refresh a few terms:

Term	Description
Grid Container	The parent element with `display: grid`
Grid Item	Each child element inside the grid
Track	A row or column
Cell	The smallest unit, where rows and columns intersect
Grid Line	The lines that separate rows and columns

Image Illustration: Grid Anatomy
Description: A visual grid layout showing labeled rows, columns, tracks, and grid lines.

Step 1: Setting Up the Grid Container

Let’s create a basic layout:

<div class="grid-container">
  <div class="cowboy"></div>
  <div class="astronaut"></div>
  <div class="book"></div>
</div>

.grid-container {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1.5fr;
  grid-template-rows: 1fr 1fr;
  gap: 3rem;
}

This creates a 3-column, 2-row layout. The third column is wider than the others, and there’s a 3rem gap between cells.

Step 2: Grid Item Defaults

By default, grid items fill cells in document order, one per cell.

Image Illustration: Default Placement
Description: Cowboy in cell 1, Astronaut in cell 2, Book in cell 3.

But what if we want to customize placement? Let’s explore that now.

Step 3: Using `grid-column` to Span Columns

To make the first item (.cowboy) span across two columns:

.cowboy {
  background-color: #60a5fa;
  grid-column: span 2;
}

This makes it span from line 1 to 3 — two columns wide.

Tip: You can inspect your grid using Chrome DevTools → Select grid element → Click the grid badge.

Image Illustration: Cowboy spans two columns
Description: Blue cowboy box stretching across first two columns.

Step 4: Line-Based Placement with `grid-column-start` and `grid-column-end`

You can also use line numbers:

.cowboy {
  grid-column-start: 2;
  grid-column-end: 4;
}

Or use negative numbers from the end:

.cowboy {
  grid-column-end: -1;
}

Using negative lines helps when your grid is dynamic.

Step 5: Spanning Rows with `grid-row`

Let’s say the book icon should stretch two rows:

.book {
  background-color: #f97316cc;
  grid-row: span 2;
}

This places .book to span vertically, across both rows.

Image Illustration: Book spans two rows
Description: Orange book icon stretches from top to bottom.

Step 6: Positioning the Astronaut Box

Let’s now place .astronaut below .cowboy and have it span two columns:

.astronaut {
  background-color: #22c55e;
  order: 1;
  grid-column: span 2;
}

Alternatively, you can use explicit placement:

.astronaut {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}

Or use grid-area shorthand:

.astronaut {
  grid-area: 2 / 1 / 3 / 3;
}

Step 7: Centering Content with Flexbox

Grid controls layout, but Flexbox is perfect for centering.

.cowboy, .astronaut, .book {
  display: flex;
  justify-content: center;
  align-items: center;
}

Image Illustration: Centered emojis
Description: Each emoji is centered inside its box.

Using Flexbox like this helps keep content aligned within each grid item.

Bonus: Overlapping Grid Items

Unlike Flexbox, CSS Grid allows item overlap.

Example: let’s overlay .book on top of .cowboy and .astronaut.

.book {
  background-color: #f97316cc;
  grid-area: 1 / 2 / 3 / 4;
}

Image Illustration: Overlapping grid
Description: Transparent book box sits on top of blue and green boxes.

Practice Time: Grid Garden

Now that you’ve got the hang of placing items, it’s time to play a game.

Try out Grid Garden by Thomas Park. It’s like Flexbox Froggy — but for CSS Grid.

28 levels of grid-placement practice await. Go water the carrots and poison the weeds.

Learn More

What’s Next?

In the next lesson, we’ll start building our final CSS Grid project — a fully responsive layout using everything we’ve learned.

You can also check out the Project: Mondrian Painting to see how to recreate a famous artwork with CSS Grid.

See you in the next tutorial!