Skip to content Skip to sidebar Skip to footer
Home / Css / Css Grid / Html

Why Grid-template-rows Track Pattern Does Not Repeat Like Grid-template-columns

Post a Comment
Here is a simple grid (there are a total of twenty .grid_items):

300 px row, 1fr column

Auto-flow in row direction

This explains why the grid items fills all the explicit columns in a row and then moves on to the next row creating an implicit row if needed. You can specify the size of implicit rows (from the 4 row in your example) using grid-auto-rows property:

* {
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 300px1fr 100px;
  grid-gap: 20px;
  grid-auto-rows: 50px; /* size implicit rows */
}

.grid_item {
  border: 1px solid rgb(0, 95, 197);
  border-radius: 3px;
  background-color: rgba(0, 95, 107, 0.8);
  padding: 0.2em;
  margin: 0; /* reset h1 margin to see grid better */overflow: hidden; /* hide overflow text */
}
<body><divclass="grid"><h1class="grid_item">300 px row, 1fr column</h1><h1class="grid_item">300 px row, 1fr column</h1><h1class="grid_item">300 px row, 1fr column</h1><h1class="grid_item">1fr row, 1fr column</h1><h1class="grid_item">1fr row, 1fr column</h1><h1class="grid_item">1fr row, 1fr column</h1><h1class="grid_item">100 px row, 1fr column </h1><h1class="grid_item">100 px row, 1fr column </h1><h1class="grid_item">100 px row , 1fr column</h1><h1class="grid_item">1fr row, 1fr column</h1><h1class="grid_item">1fr row, 1fr column</h1><h1class="grid_item">1fr row, 1fr column</h1><h1class="grid_item">1fr row, 1fr column</h1><h1class="grid_item">1fr row, 1fr column</h1><h1class="grid_item">1fr row, 1fr column</h1><h1class="grid_item">1fr row, 1fr column</h1><h1class="grid_item">1fr row, 1fr column</h1><h1class="grid_item">1fr row, 1fr column</h1><h1class="grid_item">1fr row, 1fr column</h1><h1class="grid_item">1fr row, 1fr column</h1></div></body>

Auto-flow in column direction

The grid items here fills all the explicit rows in a column and then moves on to the next column creating an implicit column if needed. You can specify the size of implicit columns (from the 4 row in your example) using grid-auto-columns property:

* {
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 300px1fr 100px;
  grid-gap: 20px;
  grid-auto-flow: column; /* flow in column direction */grid-auto-columns: 50px; /* size implicit columns */
}

.grid_item {
  border: 1px solid rgb(0, 95, 197);
  border-radius: 3px;
  background-color: rgba(0, 95, 107, 0.8);
  padding: 0.2em;
  margin: 0; /* reset h1 margin to see grid better */overflow: hidden; /* hide overflow text */
}
<body><divclass="grid"><h1class="grid_item">300 px row, 1fr column</h1><h1class="grid_item">300 px row, 1fr column</h1><h1class="grid_item">300 px row, 1fr column</h1><h1class="grid_item">1fr row, 1fr column</h1><h1class="grid_item">1fr row, 1fr column</h1><h1class="grid_item">1fr row, 1fr column</h1><h1class="grid_item">100 px row, 1fr column </h1><h1class="grid_item">100 px row, 1fr column </h1><h1class="grid_item">100 px row , 1fr column</h1><h1class="grid_item">1fr row, 1fr column</h1><h1class="grid_item">1fr row, 1fr column</h1><h1class="grid_item">1fr row, 1fr column</h1><h1class="grid_item">1fr row, 1fr column</h1><h1class="grid_item">1fr row, 1fr column</h1><h1class="grid_item">1fr row, 1fr column</h1><h1class="grid_item">1fr row, 1fr column</h1><h1class="grid_item">1fr row, 1fr column</h1><h1class="grid_item">1fr row, 1fr column</h1><h1class="grid_item">1fr row, 1fr column</h1><h1class="grid_item">1fr row, 1fr column</h1></div></body>

So coming to your questions:

After the first three rows, each row is just 1fr.

It is auto and not 1fr - you can control this using grid-auto-rows property.

The 300px 1fr 100px row pattern does not automatically repeat like the 1fr 1fr 1fr column pattern.

Implicit rows are created by filling available explicit columns by default. If you switch to grid-auto-flow: column you can have it the other way around.

You can read more about Explicit and Implicit Grids here: CSS Grid unwanted column added automatically

Post a Comment for "Why Grid-template-rows Track Pattern Does Not Repeat Like Grid-template-columns"