Estou fazendo uma lista que possuem três modelos de tamanhos:
1 - bloco quadrado 2 - bloco vertical 3 - bloco horizontal
O card-normal tem a mesma largura e mesma altura O card-comprido, tem a largura de 2 card-normal e a mesma altura O card-alto, tem a largura de 1 card-normal e a altura de 2 card-normal
Pensei na alternativa para utilizar display grid nesta lista, porém sigo com alguns impasses, ela não se ajusta 100% e preciso disso totalmente ajustado, indiferente da ordem.
Segue código que possuo:
.area {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.item {
background-color: #7fabe1;
border: 2px solid #ffa94d;
border-radius: 5px;
color: white;
padding: 1em;
}
.card-normal {
grid-column-start: span 1;
grid-row-start: span 1;
}
.card-alto {
//grid-column: 3;
//grid-row: 2 / 4;
grid-column-start: span 1;
grid-row-start: span 2;
}
.card-comprido {
//grid-column-start: span 2;
//grid-row-start: span 1;
grid-column-start: span 2;
grid-row-start: span 1;
}
<div class="area">
<div class="item card-normal">Um</div>
<div class="item card-alto">Dois card-alto</div>
<div class="item card-comprido">Três card-comprido</div>
<div class="item card-normal">Quatro</div>
<div class="item card-normal">Cinco</div>
<div class="item card-normal">Seis</div>
<div class="item card-normal">Sete</div>
<div class="item card-alto">Oito card-alto</div>
<div class="item card-normal">Nove</div>
<div class="item card-normal">Dez</div>
<div class="item card-normal">Onze</div>
<div class="item card-alto">Doze card-alto</div>
<div class="item card-comprido">Treze card-comprido</div>
<div class="item card-normal">Catorze</div>
<div class="item card-normal">Quinze</div>
<div class="item card-alto">Dezesseis card-alto</div>
<div class="item card-comprido">Dezessete card-comprido</div>
<div class="item card-normal">Dezoito</div>
<div class="item card-normal">Dezenove</div>
<div class="item card-alto">Vinte card-alto</div>
<div class="item card-comprido">Vinte e um card-comprido</div>
<div class="item card-normal">Vinte e dois</div>
<div class="item card-normal">Vinte e três</div>
<div class="item card-normal">Vinte e quatro</div>
<div class="item card-normal">Vinte e cinco</div>
<div class="item card-comprido">Vinte e seis card-comprido</div>
<div class="item card-normal">Vinte e sete</div>
<div class="item card-normal">Vinte e oito</div>
<div class="item card-normal">Vinte e nove</div>
<div class="item card-normal">Trinta</div>
</div>
Pode perceber que depois do bloco Doze, os itens não se ajustam.
Alguém já precisou fazer algo semelhante somente com html+css?