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

Question

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

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

我可以通过在grid-template-columns中指定一个数字，即12，并在网格项上使用grid-column-end: span-*来实现此目的。然而，这对于我想要7个项目均匀间隔的行来说是不够的。

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

以上代码段：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

自动填充行为：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

CSS Grid可以实现这样的行为吗？

Answer 1

我猜你可以增加col数和跨度值，所以它也可以除以7。

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我知道你专注于 CSS网格。但是当我读到：

  

我希望他们每个人均匀间隔，以便他们占用所有   可用空间。

听起来像 CSS Flexbox 对于这项工作来说是一个完美的工具。

以下是 CSS Flexbox 的替代解决方案：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;