Início / coding / Perguntas / 76925709
Accepted
mr.boris
Asked: 2023-08-18 07:55:23 +0800 CST

Grade CSS: agrupar e ajustar ao conteúdo

  • 772

Quero encerrar minha lista e ao mesmo tempo ajustá-la ao conteúdo assim:

insira a descrição da imagem aqui

O problema é que cada elemento deve caber na largura de seu conteúdo.

Já encontrei exemplo de como embrulhar itens de tamanho fixo mas não me ajuda no meu caso: grid-template-columns: repeat( 12, minmax(250px, 1fr) );

Tentei várias combinações, mas sem sucesso, a lista está fixa em uma linha ou os elementos se sobrepõem. Também não consigo encontrar nenhum bom exemplo para este caso.

<style>
.container {
  width: 450px;
  padding: 5px;
  border: 1px solid black;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat( auto-fit, minmax(min-content, 30px) );
}
.item {
  padding: 5px;
  border: 1px solid black;
  border-radius: 7px;
  white-space: nowrap;
}
</style>
<div class="container">
  <div class="item">First item</div>
  <div class="item">Second item</div>
  <div class="item">Some text here</div>
  <div class="item">Example</div>
  <div class="item">Wrapped item</div>
  <div class="item">Another wrapped item</div>
</div>

Isto é o que eu recebo por agora:

insira a descrição da imagem aqui

css

1 respostas

  1. Best Answer

    Uma grade produz linhas e colunas, como uma planilha. O layout que você procura é melhor alcançado usando um flexbox.

    .container {
  width: 450px;
  padding: 5px;
  border: 1px solid black;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.item {
  padding: 5px;
  border: 1px solid black;
  border-radius: 7px;
  white-space: nowrap;
}
    <div class="container">
  <div class="item">First item</div>
  <div class="item">Second item</div>
  <div class="item">Some text here</div>
  <div class="item">Example</div>
  <div class="item">Wrapped item</div>
  <div class="item">Another wrapped item</div>
</div>

    • 1

relate perguntas