0
143
ViewsCSS Rows as a grid layout
Current:
.parent {
display: flex;
justify-content: center;
align-items: center;
}
.childs { #class for every child
flex: 1 1 100%;
}
Good example:
How can I achive this with flex box?
So it doenst like like this, when I add new rows:
(Bad example)
·
Juan Pablo Isaza
2 answers
Answer question0
maybe you can use flex-shrink = 0 it makes your boxes unshrinkable
·
Juan Pablo Isaza
Report
0
flex is a rather one dimensional layout mechanism.
If allowed you might consider a grid instead where the cells can be laid out using a template and the dimensions of the cells are set by the grid definitions, not by the content of any one cell.
This is the template layout:
'A B'
'A B'
'C B'
'C D'
'C D'
'. D'
To give:
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas: 'A B' 'A B' 'C B' 'C D' 'C D' '. D';
gap: 1vw;
width: 50vw;
aspect-ratio: 5 / 2;
background: black;
padding: 1vw;
}
.grid>* {
border: red solid 2px;
}
.grid>div:nth-child(1) {
grid-area: A;
}
.grid>div:nth-child(2) {
grid-area: B;
}
.grid>div:nth-child(3) {
grid-area: C;
}
.grid>div:nth-child(4) {
grid-area: D;
}<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
·
Juan Pablo Isaza
Report
Answer question