grid layout

by phloe

HTML

<div class="dre-grid__container">
	<div>
	
	</div>
	<div>
	
	</div>
	<div>
	
	</div>
	<div>
	
	</div>
</div>

CSS

.dre-grid__container {
    display: grid;
    grid-template: "_1" "b" "c" "d" / 1fr;
    grid-gap: 20px;
}

@media (min-width: 400px /*768px*/) {
    .dre-grid__container {
        grid-template: "_1 _1" "b d" "c d" / 1fr 1fr;
        grid-gap: 30px;
        display: grid;
    }
}

@media (min-width: 600px /*1024px*/) {
    .dre-grid__container {
        grid-template: "_1 _1 d" "b c d" / 1fr 1fr 1fr;
        grid-gap: 40px;
    }
}

@media (min-width: 800px /*1440px*/) {
    .dre-grid__container {
        grid-template: "b _1 _1 d" "c _1 _1 d" / 1fr 1fr 1fr 1fr;
        grid-gap: 40px;
    }
}

.dre-grid__container > * {
	min-height: 250px;
	background-color: red;
}

.dre-grid__container > :nth-child(1) {
	grid-area: _1;
	min-height: 400px;
	background-color: red;
}

.dre-grid__container > :nth-child(2) {
	grid-area: b;
	background-color: orange;
}

.dre-grid__container > :nth-child(3) {
	grid-area: c;
	background-color: yellow;
}

.dre-grid__container > :nth-child(4) {
	grid-area: d;
	background-color: green;
	min-height: 500px;
}