CSS Grid — Spanning and Placing Cardio

Emily Y Leung
Apr 18 · 4 min read

Live dev notes taken throughout the CSS Grid course by Wesbos — cssgrid.io

Let’s go through spanning and placing items through differently worded instructions.

Starting with a series of 30 items within a grid container that has a grid-gap of 20px:

<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
<div class="item item10">10</div>
<div class="item item11">11</div>
<div class="item item12">12</div>
<div class="item item13">13</div>
<div class="item item14">14</div>
<div class="item item15">15</div>
<div class="item item16">16</div>
<div class="item item17">17</div>
<div class="item item18">18</div>
<div class="item item19">19</div>
<div class="item item20">20</div>
<div class="item item21">21</div>
<div class="item item22">22</div>
<div class="item item23">23</div>
<div class="item item24">24</div>
<div class="item item25">25</div>
<div class="item item26">26</div>
<div class="item item27">27</div>
<div class="item item28">28</div>
<div class="item item29">29</div>
<div class="item item30">30</div>
</div>
<style>
.container {
display: grid;
grid-gap: 20px;
}
</style>
Starting point

Cardio questions:

  1. Make the grid 10 columns wide, every other taking up twice the free space
  2. Make the grid have 10 explicit rows, 50px high each
  3. With Item 1, start at col 3 and go until 5
  4. With Item 2, start at col 5 and go until the end
  5. Make Item 5 double span 2 cols and rows
  6. Make Item 8 two rows high
  7. Make Item 15 span the entire grid width
  8. Make Item 18 span 4 widths, but end at 9
  9. Make Item 20 start at row 4 and have a height of 3 rows

Cardio Results

End result

Step by step process

1 — Make the grid 10 columns wide, every other taking up twice the free space

<style>
.container {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(5, 1fr 2fr);
}
</style>

What we end up with is a repeat of 2 values to make up 10 alternating columns.

2 — Make the grid have 10 explicit rows, 50px high each

<style>
.container {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(5, 1fr 2fr);
grid-template-rows: repeat(10, 50px);
}
</style>

While there are less than 100 items in the grid, we can still explicitly define the number of rows so that we can span across them.

10 explicitly defined rows and columns

3 — With Item 1, start at col 3 and go until 5

<style>
.container {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(5, 1fr 2fr);
grid-template-rows: repeat(10, 50px);
}
.item1 {
grid-column: 3 / 5;
}

</style>

Here we explicitly define the start and end points of the item.

4 — With Item 2, start at col 5 and go until the end

.item2 {
grid-column: 5 / -1;
}

We can only see that it is -1 at the bottom of the grid.

5 — Make Item 5 double span 2 cols and rows

.item5 {
grid-column: span 2;
grid-row: span 2;

}

Without knowing where item5 is, we can still specify the number of rows and columns it can span.

6 — Make Item 8 two rows high

.item8 {
grid-row: span 2;

}

7 — Make Item 15 span the entire grid width

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

Without knowing how many columns are in the tracks, we can always use 1 and -1 as the start and stop to specify a whole row.

8 — Make Item 18 span 4 widths, but end at 9

.item18 {
grid-column: span 4 / 9;
}

We don’t need to know where an item starts, as long as we know the span — vice versa.

9 — Make Item 20 start at row 4 and have a height of 3 rows

.item20 {
grid-row: 4 / span 3;
}

The order of items only matters after the items have been placed. In this case, 20 has been brought in earlier, but 21 continues right after 19.

Uncurated

“something small, every day” — Austin Kleon

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store