使用网格/弹性在行之间均匀大小的列答案

【问题标题】：Evenly sized columns between rows using grid/flex使用网格/弹性在行之间均匀大小的列
【发布时间】：2017-08-22 20:30:48
【问题描述】：

考虑以下 sn-p：

#container{
  border: solid 1px black;
  display: inline-grid;
  grid-template-columns: repeat(3, auto);
}

<div id="container">
  <div class="row">
    <div class="item">A1111</div>
    <div class="item">B1</div>
    <div class="item">C1</div>
  </div>
  <div class="row">
    <div class="item">A2</div>
    <div class="item">B2222</div>
    <div class="item">C2</div>
  </div>
  <div class="row">
    <div class="item">A3</div>
    <div class="item">B3</div>
    <div class="item">C3333</div>
  </div>  
</div>

最终结果是一个类似表格的显示，其中每一行的每个项目都是该列中最宽项目的宽度。

A1111 A2    A3
B1    B2222 B3
C1    C2    C3333

这很棒 - 但我需要将表格按行排列...

A1111 B1    C1
A2    B2222 C2
A3    B3    C3333

display: table 解决了这个问题 - 但表格在间距、对齐方式等方面存在一些缺点。因此，grid 和 flex 看起来很有吸引力。

唉，我不知道如何获得所需的信息。

将display: grid 添加到.row 有助于信息的顺序，但不会保持相同的列宽。

项目内容会有所不同，因此不能使用固定宽度，并且不希望网格/flex 跨越整个页面/包含宽度。

【问题讨论】：

标签： css flexbox grid-layout css-grid

【解决方案1】：

您可以使用 grid-column 定义网格项应该使用的列。这意味着该行不需要包含行 div。

工作示例...

#container{
  border: solid 1px black;
  display: inline-grid;
  grid-auto-flow: row;
  grid-gap: 10px;
  padding: 10px;
}

.col1{
  grid-column: 1;
}

.col2{
  grid-column: 2;
}

.col3{
  grid-column: 3;
}

<div id="container">
    <div class="col1">A11111</div>
    <div class="col2">B1</div>
    <div class="col3">C1</div>
    <div class="col1">A2</div>
    <div class="col2">B2222222</div>
    <div class="col3">C2</div>
    <div class="col1">A3</div>
    <div class="col2">B3</div>
    <div class="col3">C33333333</div>
  </div>
</div>

【讨论】：

好答案。（如果您提到 HTML 可以更改，这对您的问题会有所帮助。）

【解决方案2】：

您的主要问题是您的标记太深。你有类似表格的标记，三层深：表格、行和单元格。对于网格布局，您根本不需要“行”元素。

当您在一个元素上使用display: grid 或display: inline-grid 时，它会使该元素成为一个网格容器。然后它的每个子元素成为网格项。网格项将布置在其容器定义的网格中。

您还说过您想要等宽的列。为此，您应该使用fr 单位而不是auto 作为列大小：

grid-template-columns: repeat(3, 1fr);

...这将使每一列成为一个“分数”单位宽。

#container{
  border: solid 1px black;
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
}

<div id="container">
  <div class="item">A1111</div>
  <div class="item">B1</div>
  <div class="item">C1</div>
  <div class="item">A2</div>
  <div class="item">B2222</div>
  <div class="item">C2</div>
  <div class="item">A3</div>
  <div class="item">B3</div>
  <div class="item">C3333</div>
</div>

【讨论】：

【解决方案3】：

我有办法做到的。

Attached JSFiddle(click)

.row {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

.row > .item {
  display:block;
  flex: 1 1;

  border: 1px solid #000;
}

关于flex 的指南非常棒； Click here.

【讨论】：

是的，我经常参考该指南。这很好，但是弯曲跨越了整个宽度，因此间距太大。项目长度未知，因此无法设置固定宽度。