(5) CSS Grid: Implicit Rows and Columns

November, 2020

In an explicit grid, the designer specifies exactly where each item appears. What happens when extra items without such an explicit location are added?

The browser makes a guess and extends the grid. However, we can actually control what happens using a few extra statements.

Grid-Auto-Rows

In the containing element, simply add a grid-auto-rows to define any additional rows. For example, grid-auto-rows: 200px; will cause any implicit rows to be sized at 200px in height.

Grid-Auto-Columns

This property is essentially the same as grid-auto-rows: this controls the appearance of any additional columns. grid-auto-columns: 200px; will cause any extra implicit column tracks to be 200px wide.

Patterns

Both grid-auto-rows and grid-auto-columns support patterns. grid-auto-rows: 100px 200px; will cause implicit rows to alternate height; the first implicit track created will be 100px high, while the second will be 200px high and the third will be 100px high, etc.

Grid-Auto-Flow

By default, a grid will create implicit rows. However that behavior can be altered; we can create implicit columns instead by using the grid-auto-flow property. This property should appear in the containing element.

grid-auto-flow: column;

Example

Consider a CSS Grid with two columns and two rows, with four explicitly placed items.

This grid could be created with the following HTML and CSS code.

HTML

<div class="griddemo">
	<div class="item1">1</div>
	<div class="item2">2</div>        
	<div class="item3">3</div>    
	<div class="item4">4</div>    
</div>

CSS

.griddemo {
	display: grid;
	grid-gap: 10px;
	grid-template-rows: 200px 200px;
	grid-template-columns: 200px 200px;
	background-color: aliceblue;
	border: thin solid black;
	height: 100vh;
	justify-content: center;
	align-content: center;
	justify-items: center;
	align-items: center;
}
        
.item1 {
	grid-row-start: 1;
	grid-row-end: 2;
	grid-column-start: 1;
	grid-column-end: 2;
}
        
.item2 {
	grid-row-start: 1;
	grid-row-end: 2;
	grid-column-start: 2;
	grid-column-end: 3;
}
  
.item3 {
	grid-row-start: 2;
	grid-row-end: 3;
	grid-column-start: 1;
	grid-column-end: 2;
}        
    
.item4 {
	grid-row-start: 2;
	grid-row-end: 3;
	grid-column-start: 2;
	grid-column-end: 3;
}

        
.item1, .item2, .item3, .item4, .item5, .item6 {
	outline: medium dashed red;
	background-color: lightblue;
	width: 100%;
	height: 100%;
	/* using flexbox to create vertical and horizontal centering */
	display: flex;
	align-items: center;
	justify-content: center;
}

Add Items Without Explicitly Stating Location

<div class="griddemo">
	<div class="item1">1</div>
	<div class="item2">2</div>        
	<div class="item3">3</div>    
	<div class="item4">4</div>    
	<div class="item5">5</div>    
	<div class="item6">6</div>   		
</div>

Notice there is no CSS for .item5 or .item6; however the basic formatting is provided in the final CSS rule.

This is probably not our desired result! The two new items have been added on a new row; however, the dimensions have not been applied. Note from the final CSS rule that all items are set to be 100% by 100%.

This happened because the browser essentially guessed. However, the designer can control how implicit tracks are created.

Grid-Auto-Rows and Grid-Auto-Columns

CSS

.griddemo {
	display: grid;
	grid-gap: 10px;
	grid-template-rows: 200px 200px;
	grid-template-columns: 200px 200px;
	background-color: aliceblue;
	border: thin solid black;
	height: 100vh;
	justify-content: center;
	align-content: center;
	justify-items: center;
	align-items: center;
	grid-auto-rows: 200px;
	grid-auto-columns: 200px;
}

The final two properties, grid-auto-rows and grid-auto-columns, instruct the browser that all implicit rows and columns should measure 200px, which happens to be the same value used in the initial grid.

Grid-Auto-Flow

The grid-auto-flow property determines whether the browser adds implicit rows or columns. Rows are selected by default.

CSS

.griddemo {
	display: grid;
	grid-gap: 10px;
	grid-template-rows: 200px 200px;
	grid-template-columns: 200px 200px;
	background-color: aliceblue;
	border: thin solid black;
	height: 100vh;
	justify-content: center;
	align-content: center;
	justify-items: center;
	align-items: center;
	grid-auto-rows: 200px;
	grid-auto-columns: 200px;
	grid-auto-flow: column;
}