Grid Layout

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.

<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>

.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;
}

https://codepen.io/younes-jaaidi/pen/RYMQqW

More Links