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:
Above: Explicitly defined columns and rows
But what happens when we add 2 more items?
Three things happen:
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)
The row height of the new items are reverted back to its default size
Implicit dotted lines are displayed below the end of the explicit solid line
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;