Is possible to achieve this structure using html + css ?
But instead of having that vertical space between orange blocks I want to be one in the top of another.
I have used flex and grid but not really succeed so far :(
.container {
padding: 10px;
border: 1px solid red;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.big {
width: calc(60% - 22px);
padding: 10px;
background: lime;
height: 100px;
margin-bottom: 10px;
}
.small {
width: calc(40% - 22px);
height: 100px;
padding: 10px;
background: orange;
margin-bottom: 10px;
}
<div class="container">
<div class="big"> I AM BIG 1</div>
<div class="small"> I AM SMALL 1</div>
<div class="big"> I AM BIG 2</div>
<div class="big"> I AM BIG 3</div>
<div class="big"> I AM BIG 4</div>
<div class="small"> I AM SMALL 2 </div>
</div>
You can do this easily with CSS grid layout:
you can use grid-template-columns: 3fr 2fr;
because you have 60% to 40% ratio of the big
and small
elements,
row heights can be set using grid-auto-rows: 100px
,
margin between rows can be set using grid-row-gap
property,
now set the big
to always occupy the first column using grid-column: 1
and the small
to always occupy the second.
See demo below for the configuration upto now:
.container {
padding: 10px;
border: 1px solid red;
display: grid;
grid-template-columns: 3fr 2fr;
grid-auto-rows: 100px;
grid-row-gap: 10px;
}
.big {
padding: 10px;
background: lime;
grid-column: 1;
}
.small {
padding: 10px;
background: orange;
grid-column: 2;
}
<div class="container">
<div class="big"> I AM BIG 1</div>
<div class="small"> I AM SMALL 1</div>
<div class="big"> I AM BIG 2</div>
<div class="big"> I AM BIG 3</div>
<div class="big"> I AM BIG 4</div>
<div class="small"> I AM SMALL 2 </div>
</div>
Now just add grid-auto-flow: dense
to pull the orange blocks to the top - see demo below:
.container {
padding: 10px;
border: 1px solid red;
display: grid;
grid-template-columns: 3fr 2fr; /* two columns */
grid-auto-rows: 100px; /* row height */
grid-row-gap: 10px; /* gap between rows */
grid-auto-flow: dense; /* added */
}
.big {
padding: 10px;
background: lime;
grid-column: 1; /* in first column */
}
.small {
padding: 10px;
background: orange;
grid-column: 2; /* in second column */
}
<div class="container">
<div class="big"> I AM BIG 1</div>
<div class="small"> I AM SMALL 1</div>
<div class="big"> I AM BIG 2</div>
<div class="big"> I AM BIG 3</div>
<div class="big"> I AM BIG 4</div>
<div class="small"> I AM SMALL 2 </div>
</div>