Grid Advanced

Intermediate ~10 min read

Grid Column & Row

Use grid-column and grid-row to position items on specific grid lines. Lines are numbered starting from 1.

HTML

CSS

<div class='grid'>
  <div class='item1'>Item 1</div>
  <div class='item2'>Item 2</div>
  <div class='item3'>Item 3</div>
  <div class='item4'>Item 4</div>
</div>

Spanning Cells

Use span keyword to make items span multiple columns or rows: grid-column: span 2.

HTML

CSS

<div class='grid'>
  <div class='wide'>Spans 2 columns</div>
  <div class='box'>1</div>
  <div class='tall'>Spans 2 rows</div>
  <div class='box'>2</div>
  <div class='box'>3</div>
</div>

Justify Items (Horizontal)

justify-items aligns grid items horizontally within their cells: start, center, end, stretch (default).

HTML

CSS

<div class='grid-start'>
  <div class='box'>Start</div>
  <div class='box'>Start</div>
</div>
<div class='grid-center'>
  <div class='box'>Center</div>
  <div class='box'>Center</div>
</div>

Align Items (Vertical)

align-items aligns grid items vertically within their cells.

HTML

CSS

<div class='grid'>
  <div class='box'>Aligned Start</div>
  <div class='box'>Aligned Center</div>
  <div class='box'>Aligned End</div>
</div>

Justify Self & Align Self

Override container alignment for individual items with justify-self and align-self.

HTML

CSS

<div class='grid'>
  <div class='box start'>justify-self: start</div>
  <div class='box center'>justify-self: center</div>
  <div class='box end'>justify-self: end</div>
</div>

Complex Layout Example

Combining all techniques to create a magazine-style layout with different sized items.

HTML

CSS

<div class='magazine'>
  <div class='feature'>Feature Story</div>
  <div class='article'>Article 1</div>
  <div class='article'>Article 2</div>
  <div class='article'>Article 3</div>
  <div class='sidebar'>Sidebar</div>
</div>

Pro Tip: Grid lines can be negative! grid-column: 1 / -1 spans from the first to the last column.

Summary

grid-column / grid-row - Position items on grid lines
span - Make items span multiple cells
justify-items - Horizontal alignment of all items
align-items - Vertical alignment of all items
justify-self / align-self - Individual item alignment
Negative line numbers count from the end

Quick Quiz

Which property makes a grid item span 3 columns?

grid-span: 3

grid-column: span 3

column-span: 3

grid-width: 3

Previous Grid Template Areas

Next Responsive Design

Grid Column & Row

Spanning Cells

Justify Items (Horizontal)

Align Items (Vertical)

Justify Self & Align Self

Complex Layout Example

Summary

Quick Quiz

Enjoying these tutorials?