我可以在CSS网格中每行有不同数量的列吗？

  • Z时代
  • 2024-01-10
  • 分类：问答

我可以在CSS网格中每行有不同数量的列吗？

.grid {  
    display: grid;  
    grid-template-columns: repeat(3, 1fr);  
    grid-template-rows: 100px;  
    grid-auto-rows: 60px;  
    grid-gap: 15px;  
}  
.col {  
    background-color: tomato;  
}

<div class="grid">  
    <div class="col"></div>  
    <div class="col"></div>  
    <div class="col"></div>  
    <div class="col"></div>  
    <div class="col"></div>  
</div>

这产生2行，第一个是100px的高度，第二个是60px高度自动创建的。第二排的2列宽度为1fr。

这是可能通过CSS网格/ Flexbox水平居中在第2行的2列？即每行有不同数量的列。

我被困在试图为浏览器中的CSS网格框架解决一个微不足道的用例。如果您使用Flexbox构建网格，这是非常不成问题的。

但我可以用CSS Grid来实现吗？

这是我想要实现的CodePen demo。

回答：

如果您的行具有不同数量的单元格，而这些单元格并非都布置在单个二维（行和列）空间上，则您没有网格。根据定义，网格包含固定数量的行和列，以及跨越一个或多个的单元格。

（也许你就会有多种异构网格，每行一个，但只是违背了电网的整点，真的。）

回答：

你总是可以试试这样：

CSS

body { 
    margin: 2% 35%; 
} 
.container { 
    display: grid; 
    grid-gap: 10px; 
    grid-template-columns: [col] 100px [col] 100px [col] 100px [col] 100px ; 
    grid-template-rows: [row] auto [row] auto [row] ; 
    background-color: #fff; 
    color: #444; 
} 
.col { 
    background-color: #444; 
    color: #fff; 
    border-radius: 5px; 
    padding: 20px; 
    font-size: 150%; 
} 
.a { 
    grid-column: col/span 2; 
    grid-row: row ; 
} 
.b { 
    grid-column: col 3/span 2 ; 
    grid-row: row ; 
} 
.c { 
    grid-column: col ; 
    grid-row: row 2 ; 
} 
.d { 
    grid-column: col 2/span 3 ; 
    grid-row: row 2 ; 
} 
.e { 
    grid-column: col/span 4; 
    grid-row: row 3; 
}

HTML

<div class="container"> 
    <div class="col a">A</div> 
    <div class="col b">B</div> 
    <div class="col c">C</div> 
    <div class="col d">D</div> 
    <div class="col e">E</div> 
</div>
个

CodePen：https://codepen.io/anon/pen/MOLrvq

回答：

你问这个：

我可以在一个CSS网格不同数量的每行的列吗？

但后来你说这样的：

通过CSS网格/ Flexbox的这是可能的水平中心于第2行2列？

它看起来就像你被困在一个经典XY Problem：你专注于你的尝试性解决方案而不是你实际问题。

是的，可以将列（以及网格项和内容）置于CSS网格中。 （请参阅此处的各种方法：Centering in CSS Grid）

不，不可能在CSS网格或任何网格中为此问题设置不同数量的列。否则，你没有网格。

由于外观通常在布局中很重要，因此可以使用CSS网格在第一行中创建类似于三个“列”的东西，并在第二行–中居中–构建两个“列”。

在我下面的例子中，我将网格容器中的水平空间划分为12列。然后，我使用Grid的line-based placement功能定位和调整项目大小。

.grid {  
    display: grid;  
    grid-template-columns: repeat(12, 1fr);  
    grid-auto-rows: 40px;  
    grid-gap: 10px;  
}  
.col:nth-child(-1n + 3) {  
    grid-column: span 4;  
}  
.col:nth-last-child(2) {  
    grid-row-start: 2;  
    grid-column: 3/span 4;  
}  
.col:nth-last-child(1) {  
    grid-row-start: 2;  
    grid-column: 7/span 4;  
}  
.col {  
    background-color: tomato;  
}

<div class="grid">  
    <div class="col"></div>  
    <div class="col"></div>  
    <div class="col"></div>  
    <div class="col"></div>  
    <div class="col"></div>  
</div>

codepen demo

下面是它看起来像使用Firefox DevTools：

以上是 我可以在CSS网格中每行有不同数量的列吗？ 的全部内容， 来源链接： utcz.com/qa/258982.html

回到顶部