Uniformly sized columns between rows using grid / flex
Consider the following snippet:
#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>
The end result is a tabular display in which each element of each row is the width of the widest element in that column.
A1111 A2 A3
B1 B2222 B3
C1 C2 C3333
This is great - but I need a table laid out as rows ...
A1111 B1 C1
A2 B2222 C2
A3 B3 C3333
display: table
solves this, but the table has some drawbacks with respect to spacing, alignments, and so on. Therefore, mesh and flexibility look attractive.
Alas, I cannot figure out how to get the information at will.
Adding display: grid
to .row
helps organize information, but does not keep the columns equal.
The content of the element will change and therefore cannot use a fixed width, and it is not desirable for the grid / flex to span the entire page / containing width.
source to share
You can define in which column the grid item should use grid-column. This means the line does not require a div line.
Working example ...
#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>
source to share
Your main problem is that your markup is too deep. You have table layout, three levels of depth: table, rows, and cells. For the grid layout, you don't need any "row" elements at all.
When you use display: grid
or display: inline-grid
on an element, it makes that element the container for the grid. Then each of its children becomes grid items. The grid items will be laid out in the grid defined by their container.
You also said that you want the columns of the same width. For this you should use fr
, not auto
for column sizes:
grid-template-columns: repeat(3, 1fr);
... this will make each column a "fractional" unit of width.
#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>
source to share
There that I would do.
.row {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
.row > .item {
display:block;
flex: 1 1;
border: 1px solid #000;
}
There's such great guidance about flex
; Press here.
source to share