Day 8. Learning CSS Grid

Learning CSS Grid

I’ve never used CSS Grids. It’s a huge part of the things I want to fully understand after this exercise.

I’m learning with Wes Bos CSS Grids course.

Notes

CSS Grid is similar to flexbox in a lot of ways. Once we declare a parent as a grid, we implicitly make the children grid-items.

.container {
  display: grid;
}

To begin the grid magic, we have to specify the size of the grids and the number of columns.

.container {
  display: grid;
  /* This will imply 3 columns each having a size of 100px */
  grid-template-columns: 100px 100px 100px;
  /* Set the track (gutters)*/
  grid-gap: 20px;
}

We can use the auto value to automatically fill up the extra space

.container {
  ...;
  /* boxes of the second column will fill the remaining space */
  grid-template-columns: 100px auto 100px;
}

We can also make use of the repeat function.

grid-template-columns: repeat(5, 100px);

This will make 5 columns each with width of 100px.

• We can also define layouts for our rows too.

.container {
  display: grid;
  grid-template-rows: 200px 100px 400px;
}

This will create a layout of 3 rows with height of 200, 100 and 400px respectively. But they will all be on a single column. To make multi-column layouts, we have to define the grid-template-columns.

Implicit and Explicit rows and columns

Columns and rows we create ourselves, by declaring grid-template-columns or grid-template-rows, are called Explicit. Those that we don’t declare are called Implicit.

• When we define rows and column templates, the elements might not exactly match the grid definition. The remaining elements become implicit columns or rows.

Assuming our HTML and CSS look like these

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

.container {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 200px 400px;
  grid-template-rows: 50px 100px;
}

This snippet defines 2 columns with width of 200px and 400px respectively. It also specifies a 2 rows with width of 50px and 100px respectively. We have a total of 4 items and everything feels great. But what would happen if we added a few more divs?

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>

.container {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 200px 400px;
  grid-template-rows: 50px 100px;
  /* All additional divs should have row heights of 100px */
  grid-auto-rows: 100px;
}

If we add more divs, the left overs will automatically be implicit rows (Making it 4 rows altogether). But we can control the implicit rows with the grid-auto-rows property.

In the code above, we’ve added 4 more divs and set the property to 100px. This will take give the left over rows a height of 100px.

That would be all for today. See you around tomorrow.