CSS Grid Series: 4 - Implicit vs Explicit Tracks

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

To explicitly define tracks, use:

  • grid-template-columns
  • grid-template-rows

Consider this example of comparing implicit vs explicit tracks. If we have 4 grid items in a container, we can explicitly define the tracks for all of those items by declaring 2 columns and 2 rows:

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

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

The resulting grid would look like this:

2021-04-11_17h10_23.png

Above: Explicitly defined columns and rows

But what happens when we add 2 more items?

Three things happen:

  1. New items are now considered implicit as they get added to the next row below the explicit solid line (and also because we are limited to the columns that have been explicitly defined)

  2. The row height of the new items are reverted back to its default size

  3. Implicit dotted lines are displayed below the end of the explicit solid line

2021-04-11_17h11_24.png

Above: Additional items that exceed the explicitly defined tracks get tacked into the implicit realm

To control the size of items that go beyond the explicitly defined tracks, we can use:

  • grid-auto-rows
  • grid-auto-columns (more on this later since items by default jump to the next row)
<style>
    .container {
      display: grid;
      grid-gap: 20px;
      grid-template-columns: 200px 400px;
      grid-template-rows: 200px 100px;
      grid-auto-rows: 100px;
    }
</style>

Every new implicit row that gets added will now have a default height of 100px. If we want to alternate the heights, we can include multiple arguments:

grid-auto-rows: 100px 200px;