html - Why grid-template-rows track pattern does not repeat like grid-template-columns

Question

Welcome To Ask or Share your Answers For Others

html - Why grid-template-rows track pattern does not repeat like grid-template-columns

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

html - Why grid-template-rows track pattern does not repeat like grid-template-columns

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

  <div class="grid">
    <h1 class="grid_item">300 px row, 1fr column</h1>
    <h1 class="grid_item">300 px row, 1fr column</h1>
    <h1 class="grid_item">300 px row, 1fr column</h1>
    <h1 class="grid_item">1fr row, 1fr column</h1>
    <h1 class="grid_item">1fr row, 1fr column</h1>
    <h1 class="grid_item">1fr row, 1fr column</h1>
    <h1 class="grid_item">100 px row, 1fr column </h1>
    <h1 class="grid_item">100 px row, 1fr column </h1>
    <h1 class="grid_item">100 px row , 1fr column</h1>
    <h1 class="grid_item">1fr row, 1fr column</h1>
    <h1 class="grid_item">1fr row, 1fr column</h1>
    <h1 class="grid_item">1fr row, 1fr column</h1>
    <h1 class="grid_item">1fr row, 1fr column</h1>
    <h1 class="grid_item">1fr row, 1fr column</h1>
    <h1 class="grid_item">1fr row, 1fr column</h1>
    <h1 class="grid_item">1fr row, 1fr column</h1>
    <h1 class="grid_item">1fr row, 1fr column</h1>
    <h1 class="grid_item">1fr row, 1fr column</h1>
    <h1 class="grid_item">1fr row, 1fr column</h1>
    <h1 class="grid_item">1fr row, 1fr column</h1>
  </div>

CSS:

.grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /*Entire column is 1fr 1fr 1fr*/
  grid-template-rows: 600px 1fr 100px; /*Only first three rowsare 600px 1fr 100px; ?*/
  grid-gap: 20px;
}

Note: what I am going to try and explain can be seen here: https://jsfiddle.net/xth3ky0m/3/

When the grid is displayed, every <h1 class = "grid_item"><h1> is displayed according to grid-template-columns: 1fr 1fr 1fr; but only the first three rows follow grid-template-rows: 300px 1fr 100px;. After the first three rows, each row is just 1fr. The 300px 1fr 100px row pattern does not automatically repeat like the 1fr 1fr 1fr column pattern. Why is this?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T21:43:10+0000

A CSS grid layout by default fills all the explicit rows (note that explicit rows or columns are that which you specify using properties like grid-template-columns, grid-template-rows, grid-template-areas) and creates new rows as necessary (implicit rows). This behavior is due to grid-auto-flow property - see the below excerpt from MDN:

grid-auto-flow: row

Is a keyword specifying that the auto-placement algorithm places items, by filling each row in turn, adding new rows as necessary. If neither row nor column is provided, row is assumed.

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^th 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: 300px 1fr 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>
  <div class="grid">
    <h1 class="grid_item">300 px row, 1fr column</h1>
    <h1 class="grid_item">300 px row, 1fr column</h1>
    <h1 class="grid_item">300 px row, 1fr column</h1>
    <h1 class="grid_item">1fr row, 1fr column</h1>
    <h1 class="grid_item">1fr row, 1fr column</h1>
    <h1 class="grid_item">1fr row, 1fr column</h1>
    <h1 class="grid_item">100 px row, 1fr column </h1>
    <h1 class="grid_item">100 px row, 1fr column </h1>
    <h1 class="grid_item">100 px row , 1fr column</h1>
    <h1 class="grid_item">1fr row, 1fr column</h1>
    <h1 class="grid_item">1fr row, 1fr column</h1>
    <h1 class="grid_item">1fr row, 1fr column</h1>
    <h1 class="grid_item">1fr row, 1fr column</h1>
    <h1 class="grid_item">1fr row, 1fr column</h1>
    <h1 class="grid_item">1fr row, 1fr column</h1>
    <h1 class="grid_item">1fr row, 1fr column</h1>
    <h1 class="grid_item">1fr row, 1fr column</h1>
    <h1 class="grid_item">1fr row, 1fr column</h1>
    <h1 class="grid_item">1fr row, 1fr column</h1>
    <h1 class="grid_item">1fr row, 1fr column</h1>
  </div>
</body>

Categories

html - Why grid-template-rows track pattern does not repeat like grid-template-columns

html - Why grid-template-rows track pattern does not repeat like grid-template-columns

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Auto-flow in row direction

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags