Question

参考this code

.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使用两列，然后用其他3列（点）填充剩余空间

看到grid-template-areas: 'myArea myArea myArea myArea myArea . . .';时，基本上是在说：

对元素myArea使用5列，然后用其他3列（点）填充剩余空间

因此CSS Grid将可用空间除以您指定的列数； grid-template-areas可以使您对网格有一种直观的表示，其中每个'项目'除以空格都是一列，因此：area area . . .的意思是：

每行将有5列，其中“区域”将使用其中的2列

您还可以在此处https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-template-areas

了解有关网格区域和CSS网格的更多信息。

.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>

未指定时如何确定列数

1 个答案: