<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 2fr 1fr 1fr;
}
.container > div:last-child {
grid-column: 2 / 3;
grid-row: 2 / 4;
}
/* --- */
html, body , .container {
height: 100%;
margin: 0;
}
.container {
padding: 20px;
box-sizing: border-box;
}
.container * {
outline: 1px solid red;
display: grid;
align-items: center;
justify-content: center;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.