Quero encerrar minha lista e ao mesmo tempo ajustá-la ao conteúdo assim:
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:
