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

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

1 голос
/ 09 мая 2019

Вот простая сетка (всего двадцать .grid_item с): 

  <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. Почему это?

1 Ответ

1 голос
/ 09 мая 2019

Макет сетки 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>

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

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

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

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

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

Вы можете узнать больше о Явных и неявных сетках здесь: Автоматически добавлен нежелательный столбец CSS Grid

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...