Layout and responsiveness · Lesson 9 of 17

CSS Grid

Rows and columns made easy for whole-page layouts.

8 minutes2 games

display: grid with grid-template-columns splits space into columns. The fr unit means “a share of the free space”: 1fr 1fr 1fr is 3 equal columns. repeat(3, 1fr) is the same, shorter.

HTML

<style>
  .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .gallery div {
    background: #e0e7ff;
    padding: 24px;
    text-align: center;
    border-radius: 8px;
  }
</style>

<div class="gallery">
  <div>1</div><div>2</div><div>3</div>
  <div>4</div><div>5</div><div>6</div>
</div>

grid-template-columnsgap

.grid { grid-template-columns: 1fr 1fr; gap: 12px; }

Try different column proportions and gaps.

Quick question

What does grid-template-columns: 2fr 1fr mean?

Exercise

Make .grid with 4 equal columns.

HTML

<style>
  .grid {
    
  }
</style>
<div class="grid"><p>1</p><p>2</p><p>3</p><p>4</p></div>

Learn more from

Played 0 of 2 games

CSS

Layout and responsiveness · Lesson 9 of 17

CSS Grid

Rows and columns made easy for whole-page layouts.

8 minutes2 games

display: grid with grid-template-columns splits space into columns. The fr unit means “a share of the free space”: 1fr 1fr 1fr is 3 equal columns. repeat(3, 1fr) is the same, shorter.

HTML

<style>
  .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .gallery div {
    background: #e0e7ff;
    padding: 24px;
    text-align: center;
    border-radius: 8px;
  }
</style>

<div class="gallery">
  <div>1</div><div>2</div><div>3</div>
  <div>4</div><div>5</div><div>6</div>
</div>

grid-template-columnsgap

.grid { grid-template-columns: 1fr 1fr; gap: 12px; }

Try different column proportions and gaps.

Quick question

What does grid-template-columns: 2fr 1fr mean?

Exercise

Make .grid with 4 equal columns.

HTML

<style>
  .grid {
    
  }
</style>
<div class="grid"><p>1</p><p>2</p><p>3</p><p>4</p></div>

Learn more from

Played 0 of 2 games