CSS Grid Items

Inside a grid container sit one or more grid items. Any element that is a direct child of the container becomes one automatically.

Example

Five grid items inside one grid container:

Create a CSS grid container with five grid items numbered 1 through 5. The container should have three columns of equal width. Style each item with a background color, padding, and centered text.

> Output: complete HTML page

Prompt

Create a CSS grid container with five grid items numbered 1 through 5. The container should have three columns of equal width. Style each item with a background color, padding, and centered text.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Items Intro</title>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>Grid Items</h1>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

</body>
</html>

CSS Sizing/Spanning Grid Items

A single grid item is not limited to one cell: it can stretch across several columns or rows.

Where it starts and ends is controlled by these properties:

grid-column-start — the column-line where the item begins
grid-column-end — the column-line where the item finishes
grid-column — shorthand combining grid-column-start and grid-column-end
grid-row-start — the row-line where the item begins
grid-row-end — the row-line where the item finishes
grid-row — shorthand combining grid-row-start and grid-row-end

When placing a grid item, you refer to line numbers: column-lines run between columns, and row-lines run between rows.

CSS grid-column-start and grid-column-end

A grid item begins at the column-line named by grid-column-start and finishes at the one named by grid-column-end.

Example

The first grid item here runs from column-line 1 to column-line 3:

Create a CSS grid layout with five items. The grid has three columns. Make the first item start at column-line 1 and end at column-line 3, so it spans two columns. Style items with background colors, padding, and centered text.

> Output: complete HTML page

Prompt

Create a CSS grid layout with five items. The grid has three columns. Make the first item start at column-line 1 and end at column-line 3, so it spans two columns. Style items with background colors, padding, and centered text.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>grid-column-start and grid-column-end</title>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px;
  font-size: 30px;
}

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}
</style>
</head>
<body>

<h1>grid-column-start and grid-column-end</h1>

<div class="grid-container">
  <div class="item1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

</body>
</html>

The CSS grid-column Property

Writing grid-column saves you from setting grid-column-start and grid-column-end separately, since it is their shorthand.

Example

Starting at column-line 1, the first grid item here spans 2 columns:

Create a CSS grid layout with five items in a three-column grid. Use the grid-column shorthand property on the first item to start at column-line 1 and span 2 columns. Style items with background colors, padding, and centered text.

> Output: complete HTML page

Prompt

Create a CSS grid layout with five items in a three-column grid. Use the grid-column shorthand property on the first item to start at column-line 1 and span 2 columns. Style items with background colors, padding, and centered text.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>grid-column Shorthand</title>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px;
  font-size: 30px;
}

.item1 {
  grid-column: 1 / span 2;
}
</style>
</head>
<body>

<h1>grid-column Shorthand</h1>

<div class="grid-container">
  <div class="item1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

</body>
</html>

CSS grid-row-start and grid-row-end

Rows work the same way: grid-row-start names the row-line where a grid item begins, and grid-row-end the one where it finishes.

Example

The first grid item here runs from row-line 1 to row-line 3:

Create a CSS grid layout with five items in a three-column grid. Make the first item start at row-line 1 and end at row-line 3, so it spans two rows. Style items with background colors, padding, and centered text.

> Output: complete HTML page

Prompt

Create a CSS grid layout with five items in a three-column grid. Make the first item start at row-line 1 and end at row-line 3, so it spans two rows. Style items with background colors, padding, and centered text.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>grid-row-start and grid-row-end</title>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px;
  font-size: 30px;
}

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}
</style>
</head>
<body>

<h1>grid-row-start and grid-row-end</h1>

<div class="grid-container">
  <div class="item1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

</body>
</html>

The CSS grid-row Property

grid-row is the shorthand that replaces grid-row-start and grid-row-end.

Example

Starting at row-line 1, the first grid item here spans 2 rows:

Create a CSS grid layout with five items in a three-column grid. Use the grid-row shorthand property on the first item to start at row-line 1 and span 2 rows. Style items with background colors, padding, and centered text.

> Output: complete HTML page

Prompt

Create a CSS grid layout with five items in a three-column grid. Use the grid-row shorthand property on the first item to start at row-line 1 and span 2 rows. Style items with background colors, padding, and centered text.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>grid-row Shorthand</title>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px;
  font-size: 30px;
}

.item1 {
  grid-row: 1 / span 2;
}
</style>
</head>
<body>

<h1>grid-row Shorthand</h1>

<div class="grid-container">
  <div class="item1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

</body>
</html>

Combine grid-column and grid-row

To span columns and rows at the same time, give a grid item both grid-column and grid-row.

Example

The first grid item here starts at column-line 1 and row-line 1, spanning 2 columns and 2 rows:

Create a CSS grid layout with six items in a three-column grid. Use grid-column and grid-row on the first item so it starts at column-line 1 and spans 2 columns, and starts at row-line 1 and spans 2 rows. Style items with background colors, padding, and centered text.

> Output: complete HTML page

Prompt

Create a CSS grid layout with six items in a three-column grid. Use grid-column and grid-row on the first item so it starts at column-line 1 and spans 2 columns, and starts at row-line 1 and spans 2 rows. Style items with background colors, padding, and centered text.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Combine grid-column and grid-row</title>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px;
  font-size: 30px;
}

.item1 {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}
</style>
</head>
<body>

<h1>Combine grid-column and grid-row</h1>

<div class="grid-container">
  <div class="item1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

</body>
</html>

All CSS Grid Item Properties

This table collects every CSS property that grid items can use:

Grid item properties table

<table>
  <tr>
    <th>Property</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>align-self</td>
    <td>Aligns the content for a specific grid item along the column axis</td>
  </tr>
  <tr>
    <td>grid-area</td>
    <td>A shorthand property for the grid-row-start, grid-column-start, grid-row-end and the grid-column-end properties</td>
  </tr>
  <tr>
    <td>grid-column</td>
    <td>A shorthand property for the grid-column-start and the grid-column-end properties</td>
  </tr>
  <tr>
    <td>grid-column-end</td>
    <td>Specifies where to end the grid item</td>
  </tr>
  <tr>
    <td>grid-column-start</td>
    <td>Specifies where to start the grid item</td>
  </tr>
  <tr>
    <td>grid-row</td>
    <td>A shorthand property for the grid-row-start and the grid-row-end properties</td>
  </tr>
  <tr>
    <td>grid-row-end</td>
    <td>Specifies where to end the grid item</td>
  </tr>
  <tr>
    <td>grid-row-start</td>
    <td>Specifies where to start the grid item</td>
  </tr>
  <tr>
    <td>justify-self</td>
    <td>Aligns the content for a specific grid item along the row axis</td>
  </tr>
  <tr>
    <td>place-self</td>
    <td>A shorthand property for the align-self and the justify-self properties</td>
  </tr>
</table>