Now that you have good understanding of how tracks and gaps work, you can start to customize your layouts by establishing and placing grid areas. Click through the tabs below to learn more grid-container properties and how they are used.
The grid tracks we have learned about so far are explicit grids. This means we set the exact number of columns and rows to accommodate a specific number of grid cells and areas. For example...
<style>
.grid-container {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
padding: 10px;
}
</style>
<section class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</section>
In this grid, it's explicitly (specifically) stated that there need to be four columns and three rows to fit our 7 grid areas.
But what if you had 10 grid cells and needed more room? The grid would automatically add an additional row, using the parameters already set to create an implicit track. That means the anticipated patteren is “implied” and then generated to accommodate any content that doesn't fit in the designated tracks already outlined. In this example, the 10th grid area doesn't fit in the predetermined 3 rows, so an implicit row is automatically created for it in the grid container.
<section class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</section>
The grid-auto-columns and grid-auto-rows properties can be used to establish the size of any implicit column or row if an implicit value is not set or an alternate track behavior is required. Look at the chart below to see what values are accepted for each property.
| grid-auto-columns |
|---|
|
| grid-auto-rows |
|---|
|
By setting our grid-auto-row property to 3fr, it tells the grid to make any implicit row 3 rows high. (Notice that this applies only to implicit rows, not the rows that have explicit values set.)
<style>
.grid-container {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-auto-rows: 3fr;
padding: 10px;
}
</style>
The placement of grid items using justify-content and align-content should look familiar to you! We used similar properties in Flexbox layouts, and they function much the same.
| Property | Value |
|---|---|
| justify-content | space-evenly, space-around, space-between, center, start, end |
| The grid's total width must be less than the grid container width for the property to have any effect on the grid. | |
| align-content | space-evenly, space-around, space-between, center, start, end |
| The grid's total height must be less than the grid-container height for the property to have any effect on the grid. | |
Let's see some examples...
Example 1
<style>
.grid-container {
display: grid;
justify-content: space-evenly;
grid-template-columns: 50px 50px 50px;
gap: 10px;
padding: 10px;
}
</style>
Example 2
<style>
.grid-container {
display: grid;
height: 300px;
align-content: center;
grid-template-columns: auto auto auto;
gap: 10px;
padding: 10px;
}
</style>
Example 3
<style>
.grid-container {
display: grid;
height: 250px;
justify-content: start;
align-content: end;
grid-template-columns: 25% 25% 25%;
gap: 10px;
padding: 10px;
}
</style>
The next grid-container property to discuss is grid-auto-flow. This property controls items that are automatically placed (flowed) into the grid. Let's look at the acceptable values for this property and what they do.
| Value | Description |
|---|---|
| row | This value flows (places) items by filling in each row, adding new rows if necessary. |
| column | This value flows (places) items by filling in each column, adding new columns if necessary. |
| dense | This value flows (places) items to fill any holes in the grid if smaller items come up later. |
| row dense | This value flows (places) items by filling in each row and fills holes in the grid. |
| column dense | This value flows (places) items by filling in each column and fills holes in the grid. |
Notice how the last two values are comprised of two keywords as a value. This adds extra specificity to the property. If dense is used without column or row, the default flow will be row.
Now, have a look at these values in action. Below are several boxes that list the grid-auto-flow property and one of the values listed above. Click through the slides to see how the value affects the following grid layout. (Three column, two row grid, containing 6 grid items. Grid item 3 spanning two columns and grid item 5 spanning 2 rows.)
<style>
.grid-container {
display: grid;
height: 275px;
padding: 10px;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto;
}
</style>
Did you notice that dense and row dense look the same? That's because the default behavior of the dense value is row dense.
You Try!
Using your own text editor or the coding space below, practice using the grid container properties you’ve just learned, along with the track and gap properties from the previous page.
| grid-auto-flow | grid-template-columns | grid-auto-columns |
| align-content | grid-template-rows | grid-auto-rows |
| justify-content | grid-column-gap | grid-row-gap |
You can use the code snippet from the previous practice, or you can build your own. Once you feel like you've got the hang of it, move on the next page in this lesson to start learning about grid item properties and their applications.
