Şöyle bir şey yapmayı denedim fakat olmadı:


4
●190
<div class="parent"> <div class="div1"> </div> <div class="div2"> </div> <div class="div3"> </div> <div class="div4"> </div> <div class="div5"> </div> <div class="div6"> </div> </div>
.parent { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); grid-column-gap: 10px; grid-row-gap: 10px; } .div1 { width: 300px; height: 150px; background: grey; grid-area: 3 / 1 / 4 / 2; } .div2 { width: 300px; height: 150px; background: grey; grid-area: 4 / 1 / 5 / 2; } .div3 { width: 300px; height: 150px; background: grey; grid-area: 2 / 1 / 3 / 2; } .div4 { width: 300px; height: 150px; background: grey; grid-area: 3 / 3 / 4 / 4; } .div5 { width: 300px; height: 150px; background: grey; grid-area: 2 / 5 / 3 / 6; } .div6 { width: 300px; height: 150px; background: grey; grid-area: 3 / 5 / 4 / 6; }Kaynak: https://cssgrid-generator.netlify.app/