css - 占据可用水平空间的网格项

Question

我有一个包含 16 个网格项的网格。

我希望顶行包含 4 个网格项，第二行 3、第三行 2 和第四行 7。我希望它们中的每一个都均匀分布，以便它们占据所有可用空间。

我可以通过在grid-template-columns中指定一个数字(即12)并使用grid-column-end: span-*来在一定程度上实现这一点网格元素。然而，这对于我想要均匀分布 7 个元素的行来说是不够的。

在网格项上使用grid-column-end的预期行为(除了包含 7 个项的最后一行，其最后一项强制自身进入 grid- 中未指定的行)模板列):

上面的代码片段:

.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr [col]);
  grid-template-rows: repeat(4, 50px [row]);
  grid-gap: 10px;
}

.grid-item {
  border-radius: 5px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tier1 {
  background-color: mediumseagreen;
  grid-column-end: span 3;
}

.tier2 {
  background-color: mediumorchid;
  grid-column-end: span 4;
}

.tier3 {
  background-color: mediumpurple;
  grid-column-end: span 6;
}

.tier4 {
  background-color: mediumvioletred;
  grid-column-end: span 2;
}

<div class="grid-container">
  <div class="grid-item tier1">1</div>
  <div class="grid-item tier1">2</div>
  <div class="grid-item tier1">3</div>
  <div class="grid-item tier1">4</div>
  <div class="grid-item tier2">5</div>
  <div class="grid-item tier2">6</div>
  <div class="grid-item tier2">7</div>
  <div class="grid-item tier3">8</div>
  <div class="grid-item tier3">9</div>
  <div class="grid-item tier4">10</div>
  <div class="grid-item tier4">11</div>
  <div class="grid-item tier4">12</div>
  <div class="grid-item tier4">13</div>
  <div class="grid-item tier4">14</div>
  <div class="grid-item tier4">15</div>
  <div class="grid-item tier4">16</div>
</div>

我解决这个问题的想法是在grid-template-columns属性中使用auto-fill，但不处理单独的行。

自动填充行为:

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
  grid-template-rows: repeat(4, 50px);
  grid-gap: 10px;
}

.grid-item {
  border-radius: 5px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tier1 {
  background-color: mediumseagreen;
}
  /* grid-column-end: span 3; */

.tier2 {
  background-color: mediumorchid;
  /* grid-column-end: span 4; */
}

.tier3 {
  background-color: mediumpurple;
  /* grid-column-end: span 6; */
}

.tier4 {
  background-color: mediumvioletred;
  /* grid-column-end: span 2; */
}



Code snippet of above:

<div class="grid-container">
  <div class="grid-item tier1">1</div>
  <div class="grid-item tier1">2</div>
  <div class="grid-item tier1">3</div>
  <div class="grid-item tier1">4</div>
  <div class="grid-item tier2">5</div>
  <div class="grid-item tier2">6</div>
  <div class="grid-item tier2">7</div>
  <div class="grid-item tier3">8</div>
  <div class="grid-item tier3">9</div>
  <div class="grid-item tier4">10</div>
  <div class="grid-item tier4">11</div>
  <div class="grid-item tier4">12</div>
  <div class="grid-item tier4">13</div>
  <div class="grid-item tier4">14</div>
  <div class="grid-item tier4">15</div>
  <div class="grid-item tier4">16</div>
</div>

CSS 网格可以实现这种行为吗？

Answer 1

我猜你可以增加列数和跨度值，这样它也可以除以 7。

您还可以使用margin代替grid-gap: 10px;

.grid-container {
  display: grid;
  grid-template-columns: repeat(84, 1fr [col]);
  grid-template-rows: repeat(4, 60px [row]);
 
}

.grid-item {
  border-radius: 5px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin:5px
}

.tier1 {
  background-color: mediumseagreen;
  grid-column-end: span 21;
}

.tier2 {
  background-color: mediumorchid;
  grid-column-end: span 28;
}

.tier3 {
  background-color: mediumpurple;
  grid-column-end: span 42;
}

.tier4 {
  background-color: mediumvioletred;
  grid-column-end: span 12;
}

<div class="grid-container">
  <div class="grid-item tier1">1</div>
  <div class="grid-item tier1">2</div>
  <div class="grid-item tier1">3</div>
  <div class="grid-item tier1">4</div>
  <div class="grid-item tier2">5</div>
  <div class="grid-item tier2">6</div>
  <div class="grid-item tier2">7</div>
  <div class="grid-item tier3">8</div>
  <div class="grid-item tier3">9</div>
  <div class="grid-item tier4">10</div>
  <div class="grid-item tier4">11</div>
  <div class="grid-item tier4">12</div>
  <div class="grid-item tier4">13</div>
  <div class="grid-item tier4">14</div>
  <div class="grid-item tier4">15</div>
  <div class="grid-item tier4">16</div>
</div>