Question

＆＃13;

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

＆＃13;

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

＆＃13;

这会创建2行，第一行是100px高度，第二行是60px高度自动创建的。第二行中的2列具有1fr宽度。

这可以通过CSS Grid / Flexbox在第2行中水平居中2列吗？即每行有不同数量的列。

我很难尝试在浏览器中为CSS Grid框架解决一个简单的用例。如果您使用Flexbox构建网格，这是非常有问题的。

但我可以用CSS Grid实现吗？

这是我想要实现的CodePen demo。

Answer 1

你问这个：

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

但是你这样说：

这可以通过CSS Grid / Flexbox在第2行中水平居中2列吗？

您似乎陷入了经典XY Problem：您专注于尝试解决方案而不是实际问题

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

不，CSS网格中的每行不可能有不同数量的列，或者任何网格都不可能。否则，你没有网格。

由于外观通常在布局中非常重要，因此您可以构建看起来像三个＆＃34;列＆＃34;在第一行和两个＆＃34;列＆＃34;在第二行 - 居中 - 使用CSS Grid。

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

＆＃13;

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

＆＃13;

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

＆＃13;

codepen demo

以下是使用Firefox DevTools：

的样子

Answer 2

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

（也许你有多个异构网格，每行一个，但这真的打败了整个网格点。）

Answer 3

你总是可以这样试试：

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

Answer 4

您可以使用嵌套网格来解决此问题。 Grid-1（覆盖整个区域） Grid-2（涵盖第1行） Grid-3（涵盖第2行）

通过此设置，您可以缩短第2行的宽度。

Answer 5

如果有人遇到同样的麻烦，这就是我解决的方法。我在容器中有两个div，并希望它们具有不同的列。所以我只是为每个div制作了一个网格。然后我把1fr行，然后是我想要的列数。它像一种魅力。

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

5 个答案: