Почему шаблон дорожек сетки-шаблона-строк не повторяется, как столбцы-шаблон-сетки

Вот простая сетка (всего двадцать .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;
}

Примечание. То, что я собираюсь попытаться объяснить, можно увидеть здесь: https://jsfiddle.net/xth3ky0m/3/

Когда отображается сетка, каждый <h1 class = "grid_item"><h1> отображается в соответствии с grid-template-columns: 1fr 1fr 1fr;, но только первые три строки следуют за grid-template-rows: 300px 1fr 100px;. После первых трех строк каждая строка составляет всего 1fr. Шаблон строки 300px 1fr 100px не повторяется автоматически, как шаблон столбца 1fr 1fr 1fr. Почему это?


html css css-grid
person justin    schedule 09.05.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Макет сетки CSS по умолчанию заполняет все явные строки (обратите внимание, что явные строки или столбцы - это те, которые вы указываете с помощью таких свойств, как grid-template-columns, grid-template-rows, grid-template-areas) и создает при необходимости новые строки (неявные строки). Такое поведение происходит из-за свойства grid-auto-flow - см. Отрывок из MDN ниже:

grid-auto-flow: row

Ключевое слово, указывающее, что алгоритм автоматического размещения размещает элементы, заполняя каждую строку по очереди, добавляя новые строки по мере необходимости. Если ни строка, ни столбец не указаны, предполагается строка.

Автопоток в направлении ряда

Это объясняет, почему элементы сетки заполняют все явные столбцы в строке, а затем переходят к следующей строке, создавая при необходимости неявную строку. Вы можете указать размер неявных строк (из 4 th строки в вашем примере) с помощью свойства grid-auto-rows:

* {
  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>

Автопоток в направлении колонки

Элементы сетки здесь заполняют все явные строки в столбце, а затем переходят к следующему столбцу, создавая неявный столбец, если это необходимо. Вы можете указать размер неявных столбцов (из 4 th строки в вашем примере) с помощью свойства grid-auto-columns:

* {
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 300px 1fr 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>
  <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>

Итак, перейдем к вашим вопросам:

После первых трех рядов каждый ряд составляет всего 1фр.

Это auto, а не 1fr - вы можете управлять этим с помощью свойства grid-auto-rows.

Шаблон строки 300px 1fr 100px не повторяется автоматически, как шаблон столбца 1fr 1fr 1fr.

Неявные строки создаются путем заполнения доступных явных столбцов по умолчанию. Если вы переключитесь на grid-auto-flow: column, вы можете сделать это наоборот.

Подробнее о явных и неявных сетках можно прочитать здесь: Нежелательный столбец CSS Grid добавляется автоматически

person kukkuz    schedule 09.05.2019