CSS Grid Layout allows item positioning in a grid based on columns and rows without having to struggle with floats, positioning or bootstrap's css classes.
Copy <div class="wt-grid-container">
<div class="wt-item-green">GREEN</div>
<div class="wt-item-orange">ORANGE</div>
<div class="wt-item-red">RED</div>
<div class="wt-item-blue">BLUE</div>
</div>
Copy .wt-grid-container {
display: grid;
grid-template-columns: 1fr 1fr 2fr;
grid-template-rows: 1fr 1fr 1fr;
}
.wt-item-green {
background-color: green;
grid-area: 1 / 1 / 1 / 3;
}
.wt-item-blue {
background-color: blue;
grid-column: 3;
grid-row: 1;
}
.wt-item-orange {
background-color: orange;
grid-column: 1 / 2;
grid-row: 2 / 4;
}
.wt-item-red {
background-color: red;
grid-area: 2 / 2 / 4 / 4;
} 