CSS网格自动跨越剩余空白列

Question

CSS网格自动跨越剩余空白列

htmlcss

5

我正在寻找解决我的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>

- George Austin Bradley

无法使用CSS网格，需要使用flexbox。 - Paulie_D

啊。非常感谢。 - George Austin Bradley

“自动跨度”是什么意思？您可以使用“网格”来制作您的图片，只是不清楚“自动跨度”是什么。 - Azu

对于第一张图片中的方框9和10，我希望它们像最后一张图片一样均匀地占据第三行。 - George Austin Bradley

2个回答

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

- Azu

2

我已经知道如何手动完成它，我想知道CSS网格是否能够自动完成它。 - George Austin Bradley

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dale landry · Accepted Answer

你可以使用 flex-box，通过使用 flex-grow 和 calc 来实现。对于可以被 4 整除的子元素，通过计算宽度 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>