时间戳

首页 > 解决方案 > 未指定时如何确定列数

css - 未指定时如何确定列数

问题描述

参考这段代码

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

Grid Container 如何知道将项目 1 到 4 放在第一行，将项目 5 到 9 放在第二行？

另外，如果我grid-template-areas从

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

至

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

我仍然只在第一行中获得第 1 到第 4 项，其余的在第二行中。Grid Container 是如何知道这样做的？

标签： csscss-grid

解决方案

实际上，在提供的代码中，指定了列数。

当你使用 时，你告诉容器为同名grid-template-areas的元素使用一定的空间；grid-area当你看到grid-template-areas: 'myArea myArea . . .'你在说：

使用两列作为元素myArea，然后用其他 3 列（即点）填充剩余空间

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

使用五列作为元素myArea，然后用其他 3 列（即点）填充剩余空间

所以 CSS Grid 会根据你指定的列数来划分可用空间；让grid-template-areas您有一种网格的视觉表示，其中每个“项目”除以空格是一列，所以：area area . . .意味着：

每行将有 5 列，其中 'area' 将使用其中的 2

您还可以在此处阅读有关网格区域和 CSS 网格的更多信息：https ://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-template-areas

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

推荐阅读