What is Grid item placement in CSS?

CSSmarkup~5 mins

Grid item placement in CSS

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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.