I have a layout that consists of rows that contain columns (they are all divs). I want to create the illusion of a column based table, even though I am using rows.
The tricky part is that I want each column in a row to match the corresponding column in another row’s width. So for example, column 2 in row 1 is 300px, therefore column 2 in row 2 is also 300px. But column 1 or 3 could be other widths (but equal to their corresponding column).
Is this possible with CSS grid of flex box? Or does the fact these columns are in separate rows make it impossible without javascript?
you can achieve this using flex box:
.container {
display: flex;
gap: 1px;
}
.column {
display: flex;
flex-direction: column;
gap: 1px;
}
.item {
width: 100%;
padding: 20px;
box-sizing: border-box;
text-align: center;
}
.column-1 {
flex: 1 1 20%;
}
.column-2 {
flex: 1 1 30%;
}
.column-3 {
flex: 1 1 50%;
}
.column-1 .item {
background-color: #d3d3d3;
}
.column-2 .item {
background-color: #a9a9a9;
}
.column-3 .item {
background-color: #696969;
}<div class="container">
<div class="column column-1">
<div class="item">Col 1</div>
<div class="item">Col 1</div>
<div class="item">Col 1</div>
</div>
<div class="column column-2">
<div class="item">Col 2</div>
<div class="item">Col 2</div>
<div class="item">Col 2</div>
</div>
<div class="column column-3">
<div class="item">Col 3</div>
<div class="item">Col 3</div>
<div class="item">Col 3</div>
</div>
</div>