2

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?

1 Resposta 1

1

grid-auto-flow resolve o problema :)

A propriedade de CSS grid-auto-flow controla como o algoritmo de arrumação automática funciona, especificando exatamente como os itens fluirão no grid.

Se aplicar na lista: grid-auto-flow: dense;

Explicando esta linha:

A palavra-chave que determina que o algoritmo de arrumação automática use um formato de compactação "denso", que tenta preencher os espaços anteriores do grid caso receba itens menores após. Isto talvez deixe os itens fora de ordem, preenchendo espaços deixados por itens maiores.

Se omitido, o algoritmo "esparso" é utilizado, onde o algoritmo de arrumação somente "avança" no grid ao colocar os itens, nunca voltando para preencher os espaços. Isso garante que todos os itens colocados automaticamente apareçam "em ordem", mesmo que deixem espaços que poderiam ser preenchidos por itens posteriores.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .