когда не указано, как определяется количество столбцов

Question

Применительно к этот код

.item1 {
  grid-area: myArea;
}

.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea . . .';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container>div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

<div class="grid-container">
  <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 class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
</div>

Как грид-контейнер узнает, что элементы 1–4 помещаются в первый ряд, а элементы 5–9 - во второй?

Кроме того, если я изменю спецификацию grid-template-areas с

grid-template-areas: 'myArea myArea . . .';

на

grid-template-areas: 'myArea myArea myArea myArea myArea . . .';

, я все равно получу только пункты с 1 по 4 в первом ряду, а остальные - во втором.Как Grid Container знает, как это сделать?

Answer 1

На самом деле, в предоставленном коде количество столбцов указано .

Когда вы используете grid-template-areas, вы указываете контейнеру использовать определенное количество места для элементаимеет grid-area с тем же именем;когда вы видите grid-template-areas: 'myArea myArea . . .', вы говорите:

Используйте два столбца для элемента myArea, затем заполните оставшееся пространство тремя другими столбцами (которые являются точками)

Когда вы видите grid-template-areas: 'myArea myArea myArea myArea myArea . . .';, вы в основном говорите:

Используйте ПЯТЬ столбцов для элемента myArea, затем заполните оставшееся пространство тремя другимистолбцы (которые являются точками)

Таким образом, CSS Grid разделит доступное пространство на количество указанных вами столбцов;grid-template-areas позволяет вам иметь вид визуального представления вашей сетки, где каждый «элемент», разделенный пробелами, является столбцом, поэтому: area area . . . означает:

каждая строкабудет иметь 5 столбцов, из которых 'area' будет использовать 2 из них

Вы также можете узнать больше о Grid Areas и CSS Grid в целом здесь: https://css -трики.com / snippets / css / complete-guide-grid / # prop-grid-template-area

.grid {
  display: grid;
  grid-template-areas: 'area . area2 area2';
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 10px;
  border: 1px solid blue;
}

.grid-item {
  border: 1px solid grey;
  text-align: center;
}

.grid-item.area {
  grid-area: area;
}

.grid-item.area2 {
  grid-area: area2;
}

<div class="grid">
  <div class="grid-item area">Area 1</div>
  <div class="grid-item">2</div>
  <div class="grid-item area2">Area 2</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
</div>