.grid { display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(4, minmax(100px, auto)); gap: 20px; } .item { display: grid; grid-column: 2 / 7; grid-row: 2 / 4; grid-template-columns: subgrid; grid-template-rows: subgrid; row-gap: 0; } .subitem { grid-column: 3 / 6; grid-row: 1 / 3; } .subitem2 { background-color: rgb(0 0 0 / .5); grid-column: 2; grid-row: 1; }
<div class="grid"> <div class="item"> <div class="subitem"></div> <div class="subitem2"></div> </div> </div>