Por que minha lacuna de coluna fica menor quando eu aumento a largura do meu contêiner?

Jan 06 2021

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 widthdo 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

2 TemaniAfif Jan 06 2021 at 23:12

O layout da coluna é um pouco complicado. Se você ler a especificação relacionada a, column-widthpoderá 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>

3 AHaworth Jan 06 2021 at 23:03

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>