CSS Grid 自动跨越剩余的空白列答案

【问题标题】：CSS Grid auto spanning remaining blank columnsCSS Grid 自动跨越剩余的空白列
【发布时间】：2021-12-01 18:34:07
【问题描述】：

我正在寻找解决我的 CSS 网格问题的方法。我现在遇到的问题是我有一个有 4 列和 10 个框的网格，它填充了一个列行单元格，如下所示：但是，我希望其余两个框自动跨越以适应整个宽度，如下所示：（方框 9 和方框 10）。虽然我在这里实现了它，但我不想手动必须这样做。我希望网格能够自动执行此操作。这可以实现吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<style>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<style>

html {
   
}
.grid {
    width:100%;
    height:200px;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap:10px;
  
}
.grid .box {
   
  width:100%;
  height:100%;
  text-align: center;
  
    background-color: red;
   
}

/* .grid .box:nth-child(9) {
   grid-column: span 2;
}
.grid .box:nth-child(10) {
   grid-column: span 2;
} */
@media (max-width:768px){
    .grid {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}
</style>
<body>


    <div class="grid">

        <div class="box">Box 1</div>
        <div class="box">Box 2</div>
        <div class="box">Box 3</div>
        <div class="box">Box 4</div>
        <div class="box">Box 5</div>
        <div class="box">Box 6</div>
        <div class="box">Box 7</div>
        <div class="box">Box 8</div>
        <div class="box">Box 9</div>
        <div class="box">Box 10</div>
      
    </div>
 
</body>
</html>

【问题讨论】：

CSS-Grid 不可能，你需要 flexbox。
啊。非常感谢。
to auto span 是什么意思？您的图片可以使用grid，只是不清楚“自动跨度”是什么。
对于第一张图片中的9和10框，我希望它像最后一张图片一样均匀地占据第三行。

标签： html css

【解决方案1】：

您可以使用 flex-grow 和 flex-box 来做到这一点>计算宽度。对于可被 4 整除的 child 元素，计算宽度将使用计算出的宽度 width: calc(25% - 1em) 动态填充这些元素。对于不能被四整除的剩余元素，flex-grow: 1 将确保它们填满剩余空间。

.parent {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

.child {
  display: flex;
  justify-content: center;
  flex-grow: 1;
  width: calc(25% - 1em);
  background-color: red;
  height: 2em;
}

<div class="parent">
  <div class="child">Box 1</div>
  <div class="child">Box 2</div>
  <div class="child">Box 3</div>
  <div class="child">Box 4</div>
  <div class="child">Box 5</div>
  <div class="child">Box 6</div>
  <div class="child">Box 7</div>
  <div class="child">Box 8</div>
  <div class="child">Box 9</div>
</div>
<br><br>
<div class="parent">
  <div class="child">Box 1</div>
  <div class="child">Box 2</div>
  <div class="child">Box 3</div>
  <div class="child">Box 4</div>
  <div class="child">Box 5</div>
  <div class="child">Box 6</div>
  <div class="child">Box 7</div>
  <div class="child">Box 8</div>
  <div class="child">Box 9</div>
  <div class="child">Box 10</div>
</div>
<br><br>
<div class="parent">
  <div class="child">Box 1</div>
  <div class="child">Box 2</div>
  <div class="child">Box 3</div>
  <div class="child">Box 4</div>
  <div class="child">Box 5</div>
  <div class="child">Box 6</div>
  <div class="child">Box 7</div>
  <div class="child">Box 8</div>
  <div class="child">Box 9</div>
  <div class="child">Box 10</div>
  <div class="child">Box 11</div>
</div>

【讨论】：

非常感谢！
不客气... Flex 在动态布局方面比网格更直观地灵活，没有双关语。

【解决方案2】：

其实你们很亲近:)

.grid {
    width:100%;
    height:200px;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap:10px;
  
}
.grid .box {
   
  width:100%;
  height:100%;
  text-align: center;
  
    background-color: red;
   
}

.grid .box:nth-child(9) {
   grid-column: 1/span 2;
}
.grid .box:nth-child(10) {
   grid-column: 3/span 2;
} 
@media screen (max-width:768px){
    .grid {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

<div class="grid">

        <div class="box">Box 1</div>
        <div class="box">Box 2</div>
        <div class="box">Box 3</div>
        <div class="box">Box 4</div>
        <div class="box">Box 5</div>
        <div class="box">Box 6</div>
        <div class="box">Box 7</div>
        <div class="box">Box 8</div>
        <div class="box">Box 9</div>
        <div class="box">Box 10</div>
      
    </div>

【讨论】：

我已经知道如何手动完成，我想知道CSS网格是否可以自动完成。