Bird
Raised Fist0
CSSmarkup~5 mins

Grid item placement in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Grid item placement helps you decide exactly where each box goes in a grid layout. It makes your page look neat and organized.

You want to put a photo in the top-left corner of a gallery.
You need a menu to stay on the left side while content fills the rest.
You want a footer to stretch across the bottom of the page.
You want to arrange cards in a specific order on a dashboard.
Syntax
CSS
grid-column: start / end;
grid-row: start / end;

start and end are grid line numbers or names.

You can use span to make an item cover multiple columns or rows.

Examples
This places the item starting at column line 1 and ending before column line 3, spanning 2 columns. It also spans rows 2 to 3.
CSS
grid-column: 1 / 3;
grid-row: 2 / 4;
This starts at column 2 and spans 2 columns. The row is from line 1 to 2.
CSS
grid-column: 2 / span 2;
grid-row: 1 / 2;
This places the item in column 3 only, spanning rows 1 to 2.
CSS
grid-column: 3;
grid-row: 1 / 3;
Sample Program

This example creates a grid with 4 columns and 3 rows. Each colored box is placed using grid-column and grid-row to show how items can span multiple columns or rows. The boxes have keyboard focus for accessibility.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Grid Item Placement Example</title>
<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 5rem);
    gap: 0.5rem;
    max-width: 400px;
    margin: 2rem auto;
    border: 2px solid #333;
  }
  .item {
    background-color: #4a90e2;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    border-radius: 0.5rem;
  }
  .item1 {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }
  .item2 {
    grid-column: 3 / 5;
    grid-row: 1 / 3;
  }
  .item3 {
    grid-column: 1 / 2;
    grid-row: 2 / 4;
  }
  .item4 {
    grid-column: 2 / 4;
    grid-row: 3 / 4;
  }
</style>
</head>
<body>
  <main>
    <section class="grid-container" aria-label="Example grid layout">
      <div class="item item1" tabindex="0">Item 1</div>
      <div class="item item2" tabindex="0">Item 2</div>
      <div class="item item3" tabindex="0">Item 3</div>
      <div class="item item4" tabindex="0">Item 4</div>
    </section>
  </main>
</body>
</html>
OutputSuccess
Important Notes

You can use named grid lines for easier placement if you define them in grid-template-columns or grid-template-rows.

Use tabindex="0" on grid items to make them keyboard focusable for better accessibility.

Try resizing the browser to see how the grid adapts if you use flexible units like fr.

Summary

Grid item placement controls where each box sits in a grid.

Use grid-column and grid-row with start and end lines or spans.

This helps create neat, organized layouts that adapt well to different screen sizes.

Practice

(1/5)
1. What does the CSS property grid-column: 2 / 4; do in a grid container?
easy
A. It places the grid item starting at column line 2 and ending before column line 4.
B. It places the grid item in columns 2 and 4 only, skipping column 3.
C. It spans the grid item across 4 columns starting from column 2.
D. It places the grid item only in column 2.

Solution

  1. Step 1: Understand grid-column syntax

    The syntax grid-column: start / end; means the item starts at the start line and ends before the end line.

  2. Step 2: Apply to given values

    Here, start is 2 and end is 4, so the item covers columns 2 and 3 (lines 2 to 4).

  3. Final Answer:

    It places the grid item starting at column line 2 and ending before column line 4. -> Option A

  4. Quick Check:

    grid-column: 2 / 4 means columns 2 to 3 [OK]
Hint: Remember: start line to end line excludes the end line itself [OK]
Common Mistakes:
  • Thinking it includes the end line column
  • Confusing span count with line numbers
  • Assuming it skips columns between start and end
2. Which of the following is the correct syntax to make a grid item span 3 rows starting from row line 1?
easy
A. grid-row: 1 / span 3;
B. grid-row: span 3 / 1;
C. grid-row: 3 / 1;
D. grid-row: 1 - 3;

Solution

  1. Step 1: Recall grid-row span syntax

    The correct syntax to span rows is grid-row: start / span number;.

  2. Step 2: Match with options

    grid-row: 1 / span 3; uses 1 / span 3, meaning start at line 1 and span 3 rows down.

  3. Final Answer:

    grid-row: 1 / span 3; -> Option A

  4. Quick Check:

    Start line then span count is correct [OK]
Hint: Use 'start / span count' to span grid lines correctly [OK]
Common Mistakes:
  • Reversing start and span values
  • Using dash instead of slash
  • Placing span before start line
3. Given the CSS below, where will the grid item appear?
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 100px 100px;
.item {
  grid-column: 3 / 5;
  grid-row: 1 / 2;
}
medium
A. The item spans columns 1 to 3 on the first row.
B. The item spans columns 3 and 4 on the second row.
C. The item spans columns 3 and 4 on the first row.
D. The item spans columns 2 to 4 on the first row.

Solution

  1. Step 1: Analyze grid-column placement

    The item starts at column line 3 and ends before line 5, so it covers columns 3 and 4.

  2. Step 2: Analyze grid-row placement

    The item starts at row line 1 and ends before line 2, so it is on the first row only.

  3. Final Answer:

    The item spans columns 3 and 4 on the first row. -> Option C

  4. Quick Check:

    grid-column: 3 / 5 and grid-row: 1 / 2 means columns 3-4, row 1 [OK]
Hint: Start line to end line covers all lines in between [OK]
Common Mistakes:
  • Confusing row numbers with column numbers
  • Assuming end line is included
  • Mixing up first and second row
4. Identify the error in this CSS for placing a grid item:
.box {
  grid-column: span 2 / 4;
  grid-row: 1 / span 3;
}
medium
A. There is no error; the code is correct.
B. grid-row cannot use span with a start line.
C. grid-column must use only numbers, not span.
D. The order of values in grid-column is incorrect; span should come second.

Solution

  1. Step 1: Check grid-column syntax

    The correct syntax is start / end or start / span count. Here, span 2 / 4 is reversed; span should be second.

  2. Step 2: Check grid-row syntax

    grid-row: 1 / span 3; is correct syntax to start at line 1 and span 3 rows.

  3. Final Answer:

    The order of values in grid-column is incorrect; span should come second. -> Option D

  4. Quick Check:

    Span always follows start line [OK]
Hint: Start line first, then span count in grid placement [OK]
Common Mistakes:
  • Placing span before start line
  • Mixing up grid-column and grid-row syntax
  • Assuming span can be first value
5. You want a grid item to start at column 2 and span 3 columns, but your grid has only 4 columns total. Which CSS is correct and will not cause layout issues?
hard
A. grid-column: 2 / 6;
B. grid-column: 2 / span 3;
C. grid-column: 2 / 4;
D. grid-column: span 3 / 2;

Solution

  1. Step 1: Understand grid size and placement

    The grid has 4 columns, so column lines go from 1 to 5 (one more than columns).

  2. Step 2: Check each option

    • A: grid-column: 2 / 6; tries to end at line 6, outside explicit grid (may create implicit tracks).
    • B: grid-column: 2 / 4; ends at line 4, spans columns 2-3 only (2 columns).
    • C: grid-column: 2 / span 3; starts at line 2, spans 3 columns to line 5, fits perfectly.
    • D: grid-column: span 3 / 2; has incorrect syntax (span cannot precede start).

  3. Final Answer:

    grid-column: 2 / span 3; -> Option B

  4. Quick Check:

    Start line then span within grid limits [OK]
Hint: Use 'start / span count' to stay inside grid boundaries [OK]
Common Mistakes:
  • Using end line beyond grid size
  • Reversing span and start line
  • Assuming grid lines equal columns