Home › Module 06 › Grid Item Properties
Module 06 — Lesson 3

Grid Item Properties

Place grid items precisely using grid-column, grid-row, span, and align/justify-self.

📚 Lesson 3 of 5
⏱ ~40 min
🎯 Intermediate

1. Introduction

By default, grid items are placed automatically — filling cells left to right, top to bottom. But CSS Grid also gives you precise control over where each item goes and how many cells it spans.

Grid item properties let you:

  • Place an item at a specific column position (grid-column)
  • Place an item at a specific row position (grid-row)
  • Make an item span multiple columns or rows (span)
  • Override alignment for a single item (justify-self, align-self)

2. Theory

Grid Lines Recap

Grid lines are numbered starting from 1. A grid with 3 columns has 4 vertical lines (1, 2, 3, 4). A grid with 3 rows has 4 horizontal lines (1, 2, 3, 4). Negative numbers count from the end: -1 is always the last line.

/* Column lines: */
| 1 | col 1 | 2 | col 2 | 3 | col 3 | 4 |
                                      ↑ also -1

grid-column

Shorthand for grid-column-start / grid-column-end.

/* Start at line 1, end at line 3 (spans columns 1 and 2) */
grid-column: 1 / 3;

/* Span 2 columns from where auto-placed */
grid-column: span 2;

/* Start at line 2, end at last line */
grid-column: 2 / -1;

/* Full width */
grid-column: 1 / -1;

/* Individual properties */
grid-column-start: 2;
grid-column-end: 4;

grid-row

/* Start at row line 1, end at row line 3 */
grid-row: 1 / 3;

/* Span 2 rows */
grid-row: span 2;

/* Full height */
grid-row: 1 / -1;

grid-area Shorthand

Shorthand for row-start / column-start / row-end / column-end:

/* row-start / col-start / row-end / col-end */
grid-area: 1 / 1 / 3 / 4;
/* Same as: grid-row: 1 / 3; grid-column: 1 / 4; */

/* Named areas (covered in Lesson 4) */
grid-area: header;

justify-self and align-self

Override the container's justify-items / align-items for one specific item.

/* Values: auto, start, end, center, stretch */
.featured-item {
  justify-self: center; /* horizontally centred in its cell */
  align-self: end;      /* at the bottom of its cell */
}

/* Shorthand */
place-self: center;     /* both axes centred */
place-self: end start;  /* align-self: end; justify-self: start */

z-index in Grid

Grid items can overlap when placed explicitly (not auto-placed). Use z-index to control which one appears on top (same as positioned elements).

.card-1 { grid-column: 1 / 3; grid-row: 1 / 2; }
.card-2 { grid-column: 2 / 4; grid-row: 1 / 2; z-index: 1; } /* on top */

3. Real World Example

Explicit item placement is used for:

  • Featured article that spans two columns in a news grid
  • Dashboard widgets where a key metric takes a 2×2 cell area
  • Calendar where an event spans multiple days (columns)
  • Pricing cards where a recommended card is larger
  • Photo mosaic with some landscape (2 cols) and some portrait (2 rows) photos

4. Code Example

<!-- Magazine-style blog grid -->
<div class="blog-grid">
  <article class="article article--featured">Featured Post</article>
  <article class="article">Post 2</article>
  <article class="article">Post 3</article>
  <article class="article">Post 4</article>
  <article class="article article--wide">Post 5 (wide)</article>
</div>
/* ===== GRID ITEM PLACEMENT ===== */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 16px;
}

/* Featured article spans 2 columns and 2 rows */
.article--featured {
  grid-column: 1 / 3;   /* columns 1 and 2 */
  grid-row: 1 / 3;      /* rows 1 and 2 */
}

/* Wide article spans all 3 columns */
.article--wide {
  grid-column: 1 / -1;  /* all columns */
}

/* Auto-placed articles go in remaining cells */
.article {
  background: white;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  padding: 24px;
  overflow: hidden;
}


/* ===== DASHBOARD LAYOUT ===== */
.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 150px;
  gap: 16px;
}

/* Large KPI widget — 2 cols × 2 rows */
.widget--large {
  grid-column: span 2;
  grid-row: span 2;
}

/* Wide chart — full width */
.widget--full {
  grid-column: 1 / -1;
}

/* Tall widget — 1 col × 2 rows */
.widget--tall {
  grid-row: span 2;
}


/* ===== PHOTO MOSAIC ===== */
.mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 8px;
}

.mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mosaic__wide  { grid-column: span 2; }
.mosaic__tall  { grid-row: span 2; }
.mosaic__large { grid-column: span 2; grid-row: span 2; }

5. Code Breakdown

grid-column: 1 / 3 on featured
The featured article starts at grid line 1 and ends at grid line 3 — spanning columns 1 and 2. With a 3-column grid, this takes up the left two-thirds. The remaining column (column 3) is where auto-placed articles go.
grid-row: 1 / 3 on featured
The article spans rows 1 and 2. Combined with spanning 2 columns, this creates a large 2×2 block. The auto-placed articles fill the remaining cells (column 3, rows 1 and 2; then row 3 onwards).
grid-column: span 2 vs grid-column: 1 / 3
span 2 means "span 2 columns from wherever I am placed". 1 / 3 means "specifically start at line 1 and end at line 3". Use span when you want the grid to auto-place the item; use explicit lines when you need the item in a specific position.
grid-auto-rows: minmax(200px, auto)
Implicitly created rows have a minimum height of 200px but can grow taller if content requires it. This prevents very short rows for small content while still supporting tall content.

6. Common Mistakes

  • Confusing span X and line numbers. grid-column: span 3 means "span 3 columns". grid-column: 1 / 3 means "from line 1 to line 3" (which is 2 columns, not 3).
  • Not setting grid-auto-rows when items span rows. If a grid-row: span 2 item is placed into an implicitly created row, its height might collapse to zero. Set grid-auto-rows on the container.
  • Expecting auto-placed items to not move when explicit items are placed. When you place some items explicitly, other items auto-place around them. The auto-placement algorithm fills gaps intelligently — use DevTools grid visualiser to see exactly where each item lands.
  • Forgetting that overlapping items need z-index. When two items are placed in the same cells, one will be on top. Control the stack order with z-index and ensure items have explicit positioning.

7. Best Practices

  • Use span for relative spanning, explicit line numbers for exact placement.
  • Use grid-column: 1 / -1 for full-width items — works regardless of column count.
  • Use DevTools Grid Inspector (Firefox and Chrome both have excellent Grid visualisers) to see the grid lines and placement.
  • Combine auto-placement with explicit placement — only position special items explicitly; let the rest auto-place.
  • Use grid-auto-flow: dense when explicit spans leave gaps you want filled.

8. Practice Exercise

  1. Create a 4-column grid with 6 items. Make item 1 span 2 columns. Make item 4 span 3 columns. Observe auto-placement filling the gaps.
  2. Create a 3×3 grid explicitly. Place 5 items at specific positions using grid-column and grid-row. Check with DevTools that they are where expected.
  3. Build a dashboard: 4 equal columns. Place a "hero" widget at grid-column: 1 / 3; grid-row: 1 / 3;. Auto-place 6 smaller widgets in the remaining space.
  4. Create a photo mosaic: 4 columns, grid-auto-rows 200px. Mix wide, tall, large, and regular images.

9. Assignment

Build a news homepage with magazine-style layout:

  • A 4-column grid, grid-auto-rows: minmax(200px, auto)
  • Headline story: spans 3 columns, 2 rows — top-left
  • Breaking news sidebar: spans 1 column, 2 rows — top-right
  • 4 regular stories auto-placed below
  • One "full story" at the bottom spanning all 4 columns
  • Each article: image, category label, title, read-time

10. Interview Questions

Q1: What is the difference between grid-column: span 2 and grid-column: 1 / 3?

Answer: span 2 is relative — the item spans 2 columns from wherever the auto-placement algorithm places it. 1 / 3 is absolute — the item starts at column line 1 and ends at line 3 (spanning columns 1 and 2), regardless of where auto-placement would put it.

Q2: How do you make an item span the full width of the grid?

Answer: Use grid-column: 1 / -1. The -1 refers to the last grid line, so this spans from the first to the last column line regardless of how many columns exist. This is better than 1 / 4 (which breaks if you add or remove columns).

Q3: What happens when you place an item at a position that already has another item?

Answer: Items can overlap in Grid — the later item (in DOM order) sits on top by default. You can control the z-order with z-index. This is intentional behaviour sometimes used for creative layouts, overlapping headers, or glassmorphism effects.

Q4: What is place-self?

Answer: place-self is a shorthand for align-self justify-self — it overrides both alignment axes for a single grid item. For example, place-self: center centres the item both horizontally and vertically within its grid cell.

Q5: How do you create a masonry-like photo grid with CSS Grid?

Answer: Create a grid with fixed-height rows using grid-auto-rows. Then use grid-row: span X on tall images and grid-column: span X on wide images. Add grid-auto-flow: dense to fill gaps left by spanning items. Each image gets object-fit: cover to fill its cell without distortion.

11. Additional Resources

  • MDN — grid-column (search "MDN grid-column")
  • MDN — grid-row (search "MDN grid-row")
  • Firefox Grid Inspector — search "Firefox CSS grid inspector"
  • Grid by Example — gridbyexample.com
  • CSS-Tricks — Grid Layout (search "css-tricks css grid layout")
← Lesson 2: Grid Container Properties Lesson 4: Grid Template Areas →