Por que minha lacuna de coluna fica menor quando eu aumento a largura do meu contêiner?
Estou tendo dificuldade em entender a lógica por trás da lacuna da coluna em um layout de várias colunas. Eu tenho o seguinte HTML / CSS neste Fiddle :
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
</div>
.flex-container {
height: 500px;
width: 300px;
border: 1px solid blue;
columns: 120px;
padding: 10px;
}
.flex-item {
background: OliveDrab;
padding: 5px;
width: 100px;
height: 100px;
line-height: 100px;
color: white;
text-align: center;
break-inside: avoid-column;
}
Você notará que, se alterar o width
do contêiner de 300px para 400px, a lacuna entre as colunas realmente diminui.
Por que está fazendo isso? É possível alinhar à esquerda as colunas para que não se movam? A lacuna corrigida entre as colunas CSS pode sugerir que isso não é possível.
Respostas
O layout da coluna é um pouco complicado. Se você ler a especificação relacionada a, column-width
poderá encontrar:
descreve a largura ideal da coluna. A largura real da coluna pode ser maior (para preencher o espaço disponível) ou mais estreita (somente se o espaço disponível for menor do que a largura da coluna especificada). ref
Remova a largura dos elementos e redimensione o contêiner para notar o seguinte:
.flex-container {
width: 400px;
border: 1px solid blue;
columns: 120px;
padding: 10px;
overflow:hidden;
resize:horizontal;
}
.flex-item {
background: OliveDrab;
padding: 5px;
height: 100px;
line-height: 100px;
color: white;
text-align: center;
break-inside: avoid-column;
}
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
</div>
Você notará que a lacuna é realmente fixa, mas a largura das colunas está mudando.
Você pode encontrar mais detalhes sobre o algoritmo aqui: https://drafts.csswg.org/css-multicol-1/#pseudo-algorithm
Uma solução é considerar o uso de grade CSS com largura de coluna fixa. O truque é definir a largura da coluna da grade para ser igual à lacuna + largura da coluna e fazer com que o contêiner preencha todas as colunas (sua largura será um multiplicador da lacuna + largura da coluna )
Redimensione a tela para ver o resultado:
.container {
display:grid;
grid-template-columns:repeat(auto-fit,140px); /* 120 + 20 */
overflow: hidden;
resize: horizontal;
border: 1px solid blue;
}
.flex-container {
grid-column:1/-1;
column-width: 120px;
column-gap: 20px;
padding: 10px;
}
.flex-item {
background: OliveDrab;
padding: 5px;
height: 100px;
line-height: 100px;
color: white;
text-align: center;
break-inside: avoid-column;
}
<div class="container">
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
<div class="flex-item">9</div>
<div class="flex-item">10</div>
</div>
</div>
Se você não especificar uma contagem de coluna (o segundo parâmetro para colunas), o sistema calculará o número de colunas possível (ou seja, ele considera auto como o parâmetro de contagem de coluna).
Você especificou uma largura de coluna 'ideal' de 120px e os itens reais têm uma largura menor do que isso. Portanto, o sistema calcula que você pode colocar 3 colunas no contêiner de 400px de largura e distribuir as duas primeiras de acordo.
Aqui estão algumas informações de https://developer.mozilla.org/en-US/docs/Web/CSS/column-width
A propriedade CSS column-width define a largura ideal da coluna em um layout de várias colunas. O contêiner terá tantas colunas quantas puder caber, sem nenhuma delas tendo uma largura menor que o valor da largura da coluna Se a largura do contêiner for mais estreita que o valor especificado, a largura da coluna única será menor do que a largura da coluna declarada.
Se você quiser ter certeza de que há apenas duas colunas, forneça o segundo parâmetro:
columns: 120px 2;
.flex-container {
height: 500px;
width: 400px;
border: 1px solid blue;
columns: 120px 2;
padding: 10px;
}
.flex-item {
background: OliveDrab;
padding: 5px;
width: 100px;
height: 100px;
line-height: 100px;
color: white;
text-align: center;
break-inside: avoid-column;
}
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
</div>