Line based placement method can be used to create CSS grid with columns of unequal height and width.
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: repeat(10, 1fr);
grid-gap: 5px;
padding: 5px;
height: 100vh;
background-color: #2196F3;
}
/* line-based placement */
.item1 { grid-column: 1 / 2; grid-row: 1 / 4; }
.item2 { grid-column: 2 / 3; grid-row: 1 / 8; }
.item3 { grid-column: 3 / 4; grid-row: 1 / 4; }
.item4 { grid-column: 1 / 3; grid-row: 8 / 11; }
.item5 { grid-column: 3 / 4; grid-row: 4 / 11; }
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
border: 1px solid #ccc;
}
* { box-sizing: border-box; margin: 0; }
<div class="grid-container"> <div class="item1"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div> <div class="item2"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam sunt blanditiis facere eius placeat suscipit consequuntur ullam dolor quod tenetur. Nostrum deleniti id temporibus officia, itaque voluptatibus laudantium ad porro.</p></div> <div class="item3"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div> <div class="item4"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div> <div class="item5"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div> </div>
Desired output:
