CSS · Lesson 10

Grid: Items

Placing each item on the grid

In CSS Lesson 9, the items filled the grid one cell at a time. Now let's choose exactly where each item goes and how much room it takes.

What you'll learn

  • How grid lines are numbered, and how to make an item cover several columns or rows.
  • How to use span and the grid-area shorthand.
  • How to line up one item inside its cell with justify-self and align-self.

Let's place items

Every grid has invisible grid lines between its columns and rows. You place an item by saying which line it starts on and which line it ends on. An item can cover one cell, or several cells in a row or a column.

Think of a newspaper's front page. The editor lays it out on a grid of columns. Small stories take one box each, but the top story gets a bigger space: two columns wide and two rows tall. An ad at the bottom runs across all the columns.

The page name takes row 1, so the top story covers rows 2 and 3. The other stories fill the free cells in order.

A closer look

Counting grid lines

A grid with three columns has four column lines, numbered 1 to 4 from left to right. grid-column: 1 / 3; means "start at line 1, end at line 3", so the item covers the first two columns.

Rows and the span keyword

Rows work the same way with grid-row, counting lines from the top. Instead of an end line, you can say how many cells to cover: grid-column: span 2; means "cover two columns, starting wherever you land". -1 is the last line, so grid-column: 1 / -1; covers the full width, however many columns there are.

The grid-area shorthand

grid-area sets all four lines at once, in this order: row start / column start / row end / column end. grid-area: 1 / 1 / 3 / 3; is the same as grid-row: 1 / 3; plus grid-column: 1 / 3;. It also takes a name from grid-template-areas, as you saw in CSS Lesson 9.

Lining up one item

justify-self and align-self line up a single item inside its own cell, left to right and top to bottom. They are the one-item versions of justify-items and align-items.

Let's build it

Let's lay out a Front Page Bytes front page on a three-column grid from CSS Lesson 9. Each code box opens on the CSS tab with the new lines highlighted. Click HTML to see the page being styled.

Make the top story two columns wide

Your code 
body {  background-color: #F0F7FF;  font-family: Arial, Helvetica, sans-serif;}.page {  display: grid;  grid-template-columns: repeat(3, 1fr);  gap: 8px;}.page div {  background-color: white;  border: 3px solid #11141A;  padding: 12px;}.top {  min-height: 140px;  font-size: 20px;  grid-column: 1 / 3;}
What you see

grid-column: 1 / 3; stretches the top story from column line 1 to line 3: two columns. Weather moves to the third column, and the other items fill the next rows.

Make it two rows tall

Your code 
body {  background-color: #F0F7FF;  font-family: Arial, Helvetica, sans-serif;}.page {  display: grid;  grid-template-columns: repeat(3, 1fr);  gap: 8px;}.page div {  background-color: white;  border: 3px solid #11141A;  padding: 12px;}.top {  min-height: 140px;  font-size: 20px;  grid-column: 1 / 3;  grid-row: 1 / 3;}
What you see

grid-row: 1 / 3; makes the top story cover rows 1 and 2. Weather and Games now stack in the column on its right.

Run the ad across the page with span

Your code 
body {  background-color: #F0F7FF;  font-family: Arial, Helvetica, sans-serif;}.page {  display: grid;  grid-template-columns: repeat(3, 1fr);  gap: 8px;}.page div {  background-color: white;  border: 3px solid #11141A;  padding: 12px;}.top {  min-height: 140px;  font-size: 20px;  grid-column: 1 / 3;  grid-row: 1 / 3;}.ad {  grid-column: span 3;}
What you see

grid-column: span 3; makes the ad cover three columns. There's no room for that next to Apps, so it moves to a new row and runs across the full width.

Say it shorter with grid-area

Your code 
body {  background-color: #F0F7FF;  font-family: Arial, Helvetica, sans-serif;}.page {  display: grid;  grid-template-columns: repeat(3, 1fr);  gap: 8px;}.page div {  background-color: white;  border: 3px solid #11141A;  padding: 12px;}.top {  min-height: 140px;  font-size: 20px;  grid-area: 1 / 1 / 3 / 3;}.ad {  grid-column: span 3;}
What you see

grid-area: 1 / 1 / 3 / 3; replaces the two lines: row 1 to 3, column 1 to 3. The page looks the same as before.

Center the ad in its row

Your code 
body {  background-color: #F0F7FF;  font-family: Arial, Helvetica, sans-serif;}.page {  display: grid;  grid-template-columns: repeat(3, 1fr);  gap: 8px;}.page div {  background-color: white;  border: 3px solid #11141A;  padding: 12px;}.top {  min-height: 140px;  font-size: 20px;  grid-area: 1 / 1 / 3 / 3;}.ad {  grid-column: span 3;  justify-self: center;}
What you see

justify-self: center; stops the ad from stretching. It shrinks to its text and sits in the middle of its wide cell.

Line up one box at the top

Your code 
body {  background-color: #F0F7FF;  font-family: Arial, Helvetica, sans-serif;}.page {  display: grid;  grid-template-columns: repeat(3, 1fr);  gap: 8px;}.page div {  background-color: white;  border: 3px solid #11141A;  padding: 12px;}.top {  min-height: 140px;  font-size: 20px;  grid-area: 1 / 1 / 3 / 3;}.ad {  grid-column: span 3;  justify-self: center;}.weather {  align-self: start;}
What you see

The top story is tall, so the rows beside it are tall too, and Weather stretched to fill its cell. align-self: start; lets only Weather shrink to its text, at the top of its cell.

Quick notes

grid-column Which columns it covers 
.top { grid-column: 1 / 3; }

How to use

  • 1 / 3 Starts at column line 1 and ends at line 3, so it covers two columns.
  • span 2 Covers two columns, starting wherever the item lands.
  • 1 / -1 From the first line to the last line: the full width.

Examples

  1. A main story that covers two columns.

    .top {  grid-column: 1 / 3;}

  2. A banner across the full width.

    .banner {  grid-column: 1 / -1;}

  3. An ad that covers three columns.

    .ad {  grid-column: span 3;}
grid-row Which rows it covers 
.top { grid-row: 1 / 3; }

How to use

  • 1 / 3 Starts at row line 1 and ends at line 3, so it covers two rows.
  • span 2 Covers two rows.
  • Lines are counted from the top, starting at 1.

Examples

  1. A tall sidebar that covers two rows.

    .side {  grid-row: 1 / 3;}

  2. A photo that is two rows tall.

    .photo {  grid-row: span 2;}
grid-area Rows and columns in one 
.top { grid-area: 1 / 1 / 3 / 3; }

How to use

  • 1 / 1 / 3 / 3 Row start / column start / row end / column end.
  • top A name from grid-template-areas (CSS Lesson 9).

Examples

  1. A big story in the top-left, two rows by two columns.

    .top {  grid-area: 1 / 1 / 3 / 3;}

  2. A header placed in its named area.

    .header {  grid-area: top;}
justify-self Left or right in its cell 
.ad { justify-self: center; }

How to use

  • stretch Fills the width of its cell. This is the default.
  • start / center / end Sits at the left, middle or right of its cell.

Examples

  1. A button in the middle of its cell.

    .buy {  justify-self: center;}

  2. A date on the right side of its cell.

    .date {  justify-self: end;}
align-self Up or down in its cell 
.weather { align-self: start; }

How to use

  • stretch Fills the height of its cell. This is the default.
  • start / center / end Sits at the top, middle or bottom of its cell.

Examples

  1. A short note at the top of a tall cell.

    .note {  align-self: start;}

  2. A price at the bottom of its cell.

    .price {  align-self: end;}

Common mistakes

These are mistakes many beginners make. Each mini browser shows what really happens.

Counting columns instead of lines

The mistake 
body {  background-color: #F0F7FF;  font-family: Arial, Helvetica, sans-serif;}.page {  display: grid;  grid-template-columns: repeat(3, 1fr);  gap: 8px;}.page div {  background-color: white;  border: 3px solid #11141A;  padding: 12px;}.top {  min-height: 140px;  font-size: 20px;  grid-column: 1 / 2;}
What you see

The plan was two columns, but 1 / 2 goes from line 1 to line 2, which is just one column. The top story stays in one cell.

Tip: Count lines: two columns go from line 1 to line 3, or write grid-column: span 2;

Placing items in a box that isn't a grid

The mistake 
body {  background-color: #F0F7FF;  font-family: Arial, Helvetica, sans-serif;}.page {  gap: 8px;}.page div {  background-color: white;  border: 3px solid #11141A;  padding: 12px;}.top {  min-height: 140px;  font-size: 20px;  grid-column: 1 / 3;}
What you see

grid-column only works on items inside a grid container. .page lost its display: grid;, so every item is stacked on its own line, full width.

Tip: Add display: grid; and the columns to the parent, .page.

Spanning more columns than the grid has

The mistake 
body {  background-color: #F0F7FF;  font-family: Arial, Helvetica, sans-serif;}.page {  display: grid;  grid-template-columns: repeat(3, 1fr);  gap: 8px;}.page div {  background-color: white;  border: 3px solid #11141A;  padding: 12px;}.top {  min-height: 140px;  font-size: 20px;  grid-column: 1 / 3;}.ad {  grid-column: span 4;}
What you see

The grid has three columns, but the ad asks for four. The browser adds a fourth column to make room, so the whole layout changes: Games moves up into the new column, and every column gets narrower.

Tip: Use span 3 for three columns, or 1 / -1 to cover the full width, whatever the number of columns.

Test your knowledge

Edit the CSS on the left. Open the HTML tab to see the class names you can use. The mini browser updates as you type, and each goal gets a check mark when it's done.

No clicking needed. Each goal gets a check mark by itself once your code does it.

  1. Make .hero cover two columns.
  2. Make .hero cover two rows.
  3. Run the .footer across all three columns.
  4. Center the .footer in its row with justify-self.
Your code
What you see
Go to Exercises

Recap

  • Grid lines are numbered from 1. grid-column and grid-row place an item from one line to another, like 1 / 3.
  • span 2 covers two cells, 1 / -1 covers the full width, and grid-area sets rows and columns in one line.
  • justify-self and align-self line up one item inside its own cell.

References

Lesson content prepared by the WebCore F.E. team for beginner learners. The following references were used in preparing this lesson.

  • W3C. CSS Grid Layout Module Level 2 (official specification). Open reference
  • W3C. CSS Box Alignment Module Level 3 (official specification, justify-self and align-self). Open reference
  • LibreTexts. Web Site Design (2022, open textbook). Open reference