我可以在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。

来源

2017-12-03 knitevision

一格，顾名思义，具有相同数量的每行的列。您需要flexbox，而不是网格。 – jhpratt

这样的东西可能是有用的：https：//stackoverflow.com/questions/43962217/centering-columns-in-css-grid – instead

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

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

来源

2017-12-03 00:34:55 BoltClock

哦，这是一个无赖，是啊，我的问题甚至没有在这个框架内有意义。谢谢 – knitevision

@knitevision也许作为一个附注，你可以将'grid-template-rows'设置为'auto'来在列中放置不同数量的框。但是你不能像你的例子那样将第二行盒子居中。 CSS网格相当“僵化”。 – lynx

你总是可以试试这样：

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

来源

2017-12-03 00:38:14 Alina

你问这个：

我可以在一个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：

来源

2017-12-03 01:17:26

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

回答

相关问题