占用可用水平空间的网格项目

Question

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

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

我可以通过在grid-template-columns 中指定一个数字（即12）并在网格项目上使用grid-column-end: span-* 来实现这一点。但是，这对于我希望 7 个项目均匀分布的行来说是不够的。

在网格项目上使用grid-column-end 的预期行为（除了最后一行有 7 个项目，其最后一个项目强制自己进入grid-template-columns 中未指定的行）：

上面的代码sn-p：

.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 Grid 可以实现这样的行为吗？

Answer 1

我猜你可以增加 col 数和 span 值，这样它也可以除以 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>

Answer 2

我了解到您正在关注 CSS 网格。但是当我阅读时：

我希望它们中的每一个都均匀分布，以便它们占据所有 可用空间。

在我看来，CSS Flexbox 将是完成这项工作的完美工具。

这里是 CSS Flexbox 的替代解决方案：

.grid-container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
width: 460px;
}

.grid-item {
display: block;
height: 60px;
line-height: 60px;
color: rgb(255, 255, 255);
text-align: center;
font-size: 22px;
font-weight: bold;
border-radius: 9px;
margin: 4px;
}

.tier1 {
flex: 1 1 calc((100% - (2 * 4px * 4)) / 4); /* 4 blocks */
background-color: mediumseagreen;
}

.tier2 {
flex: 1 1 calc((100% - (2 * 4px * 3)) / 3); /* 3 blocks */
background-color: mediumorchid;
}

.tier3 {
flex: 1 1 calc((100% - (2 * 4px * 2)) / 2); /* 2 blocks */
background-color: mediumpurple;
}

.tier4 {
flex: 1 1 calc((100% - (2 * 4px * 7)) / 7); /* 7 blocks */
background-color: mediumvioletred;
}

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