考虑以下片段:
#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
解决了这个问题——但是 table 在间距、对齐等方面有一些缺点。因此,grid 和 flex 看起来很有吸引力。
唉,我想不出如何按需要排列信息。
将 display: grid
添加到 .row
有助于信息的顺序,但不会保持相等的列宽。
元素内容会有所不同,因此不能使用固定宽度,并且不希望 grid/flex 跨越整个页面/包含宽度。
最佳答案
您可以使用 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>
关于css - 使用 grid/flex 使行之间的列大小均匀,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43092047/