Intro to CSS Grid Layout Part 2

This is intro to css grid layout part 2, continuing from the first post which explained basics of CSS grid layout. This post will explain fractional units which control the width of each grid item.

Example CSS Grid Layout

Example HTML Code

This is the html code used for the example images in the post.

<div class="container">
  <div class="item item--1">1: Orange</div>
  <div class="item item--2">2: Green</div>
  <div class="item item--3">3: Violet</div>
  <div class="item item--4">4: Pink</div>
  <div class="item item--5">5: Blue</div>
  <div class="item item--6">6: Brown</div>
</div>

Example CSS Code

This is the common CSS code used for the example images. I will specify more properties separately when necessary. For more explanations about rows, columns and gap properties, please take a look at the first post.

.container {
  background-color: #eee;
  width: 1000px;
  margin: 30px auto;
  
  display: grid;
  grid-template-rows: repeat(2, 150px);
  grid-template-columns: repeat(3, 200px);
  grid-gap: 30px;
}

.item {
  padding: 20px;
  font-size: 30px;
  font-family: sans-sarif;
  color: white;
  
  &--1 {
    background-color: orangered;
  }
  
  &--2 {
    background-color: green;
  }
  
  &--3 {
    background-color: violet;    
  }
  
  &--4 {
    background-color: pink;
  }
  
  &--5 {
    background-color: blue;
  }
    
  &--6 {
    background-color: brown;
  }
}

Fractional Units

We have defined a two-dimensional grid with two rows (width 150px) and three columns (width 200px). However, as you can see the left over space (gray color), the grid is not filling up the container width. Fractional units become useful to fill up the space just like flex: 1 property. Note that I only modified the necessary property for readability (you will still need the common code along with the modified one)

.container {
  grid-template-columns: repeat(2, 200px) 1fr;
}

Now, we have two columns of width 200px and the last column just grows to fill all the available space in the container.

What if you want to have all the columns grow equally instead of fixed width? You just need to specify the fr in the repeat like this.

.container {
  grid-template-columns: repeat(3, 1fr);
}

Note again that 1fr is a fraction of each available space. It means 2fr will have double size of 1fr in the container. You can also think of it as this way – the entire width will be divided into each fraction based on the specified ratio. You can use mix of %, px, or fr. For example, if you put the code as the following, the first column will have the 50% of the entire width and the rest of columns will be divided based on specified fr.

.container {
  grid-template-columns: 50% 1fr 2fr;
}

One thing to note is the gap size when using % or px. % or px do not take the gap as part of their size. They take the specified width. However, fractional units count the space after subtracting the gaps from the available space. Note the difference between the two images below – gap increase from 30px to 60px. The first column – width 50% – stays same but the width of the others decrease as gap size increased.

Conclusion

In this post, we went over fractional units which control the width of each grid item. For defining CSS grid, please take a look at the first post. In the next article, I am going to explain the positioning of each grid item.