没有行的网格列？

Question

没有行的网格列？

csscss-grid

8

我正在尝试使用CSS网格规范创建一个三列布局，但是在行和元素大小方面遇到了问题。我的列需要包含不确定数量的内容，高度也各不相同。

这是我理想的布局：

问题：

1) 如果我指定元素A和B使用第1行，第1列，则它们会堆叠在一起，而不是B在A下面。

2) 如果我指定元素B使用第二行，则由于元素C使第1行变高，元素B会被推到元素C下面。

3) 如果我指定元素B使用第二行，则元素A会拉伸以填充第一行。

你是否有办法让元素的表现像第一张图片中那样？

我所知道的唯一解决方案是在列内创建“脚手架”div，如下所示：

<div class="grid">
    <div class="col">
        <div class="itemA"></div>
        <div class="itemB"></div>
    </div>
    <div class="col">
        <div class="itemC"></div>
    </div>
    <div class="col">
        <div class="itemD"></div>
        <div class="itemE"></div>
        <div class="itemF"></div>
    </div>
</div>

但我不喜欢这样做，而且我认为网格规范应该允许创建布局而不需要脚手架。

问题：

1）有没有办法防止元素在垂直方向上拉伸以填充行？

2）是否可以将两个元素放在同一行上，并使它们一个在另一个下面而不是冲突？

这是我的两个笔记，我试图使用和不使用脚手架找到解决方案：

没有脚手架

有脚手架

- Andronomos

一个网格的所有直接子元素都是网格项，所以如果你定义了2列并且有5个直接子元素，它们将堆叠成为2列3行。你可能可以通过跨越列和行来实现。 - Rainbow

我想指出你试图做的不是一个网格，所以CSS-Grid在这里不是正确的工具。 - Paulie_D

当你说“定义列”时，是指使用grid-template-columns还是我提到的脚手架？我想尽量避免使用脚手架，因为我希望我的HTML代码在功能正常的同时尽可能精简。另外，我希望有3列，并且最好没有行。我希望它看起来像我发布的第一张图片。这只有通过使用脚手架才能实现。 - Andronomos

1

尽可能避免使用脚手架工具没有任何问题 - 我只是不确定在这种情况下能够避免多少。 - BoltClock

1

特别是由于脚手架的重量可以忽略不计。 - Paulie_D

显示剩余7条评论

1个回答

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

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

- Rainbow · Accepted Answer

虽然我能找到最接近的解决方案，但我建议你使用flexbox。在CSS网格中，你不能仅定义列，浏览器会为你定义行，如果你不这样做并且没有管理它们，你将得到奇怪的布局。

我在元素高度之间硬编码了差异。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.grid {
  background: brown;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-gap: 10px;
  padding: 10px;
}

.grid>div {
  background-color: orange;
}

.itemA {
  grid-column-start: 1;
  grid-row: 1 / 1;
  width: 100px;
  height: 100px;
}

.itemB {
  grid-column-start: 1;
  grid-row: 2 / 4;
  height: 200px;
}

.itemC {
  grid-column-start: 2;
  grid-row: 1 / 3;
  height: 200px;
}

.itemD {
  grid-column-start: 3;
  width: 100px;
  height: 100px;
}

.itemE {
  grid-column-start: 3;
  height: 100px;
}

.itemF {
  grid-column-start: 3;
  grid-row: 3 / 4;
  height: 200px;
}

<div class="grid">
  <div class="itemA">A</div>
  <div class="itemB">B</div>
  <div class="itemC">C</div>
  <div class="itemD">D</div>
  <div class="itemE">E</div>
  <div class="itemF">F</div>
</div>