grid 🚧
⠀
⠀
⠀
⠀
⠀
⠀
⠀
⠀
⠀
⠀
⠀
⠀
⠀
<div class="grid gap-3 grid-cols-5 ...">
<div class="row-span-4 ...">...</div>
<div class="...">...</div>
<div class="...">...</div>
<div class="...">...</div>
<div class="...">...</div>
<div class="...">...</div>
<div class="...">...</div>
<div class="...">...</div>
<div class="...">...</div>
<div class="col-span-3 ...">...</div>
<div class="...">...</div>
<div class="...">...</div>
<div class="col-start-4 col-end-6 ...">...</div>
</div>
<div class="grid ...">
<div class="...">...</div>
<div class="...">...</div>
<div class="...">...</div>
<div class="...">...</div>
<div class="...">...</div>
<div class="...">...</div>
<div class="...">...</div>
<div class="...">...</div>
<div class="...">...</div>
<div class="...">...</div>
<div class="...">...</div>
<div class="...">...</div>
<div class="...">...</div>
</div>
.grid {
display: grid;
}
<div class="grid gap-3 grid-cols-5 ...">
<div class="row-span-4 ...">...</div>
<div class="...">...</div>
<div class="...">...</div>
<div class="...">...</div>
<div class="...">...</div>
<div class="...">...</div>
<div class="...">...</div>
<div class="...">...</div>
<div class="...">...</div>
<div class="col-span-3 ...">...</div>
<div class="...">...</div>
<div class="...">...</div>
<div class="col-start-4 col-end-6 ...">...</div>
</div>
.grid {
display: grid;
}
.col-span-6 {
grid-column: span 6/span 6;
}
.row-span-6 {
grid-row: span 6/span 6;
}
.col-start-5 {
grid-row-start: 5;
}
.col-end-6 {
grid-column-end: 6;
}