Pourquoi mon espace de colonne diminue-t-il lorsque j'augmente la largeur de mon conteneur?

Jan 06 2021

J'ai du mal à comprendre la logique derrière l'écart de colonne dans une mise en page à plusieurs colonnes. J'ai le HTML / CSS suivant dans ce violon :

<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;
}

Vous remarquerez que si vous changez le widthdu conteneur de 300px à 400px, l'écart entre les colonnes se réduit en fait.

Pourquoi ça fait ça? Est-il possible d'aligner à gauche les colonnes pour qu'elles ne bougent pas? Un écart fixe entre les colonnes CSS peut suggérer que ce n'est pas possible.

Réponses

2 TemaniAfif Jan 06 2021 at 23:12

La disposition des colonnes est un peu délicate. Si vous lisez la spécification relative à column-widthvous pouvez trouver:

décrit la largeur optimale de la colonne. La largeur réelle de la colonne peut être plus large (pour remplir l'espace disponible) ou plus étroite (uniquement si l'espace disponible est inférieur à la largeur de colonne spécifiée). réf

Supprimez la largeur des éléments et redimensionnez le conteneur pour remarquer ceci:

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

Vous remarquerez que l'écart est en effet fixe mais que la largeur des colonnes change.

Vous pouvez trouver plus de détails sur l'algorithme ici: https://drafts.csswg.org/css-multicol-1/#pseudo-algorithm


Une solution consiste à envisager l'utilisation d'une grille CSS ayant une largeur de colonne fixe. L'astuce est de définir la largeur de la colonne de la grille pour qu'elle soit égale à l'écart + largeur de la colonne et vous faites de conteneur remplir toutes les colonnes (sa largeur sera un multiplicateur d' écart + largeur de colonne )

Redimensionnez l'écran pour voir le résultat:

.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

Si vous ne spécifiez pas de nombre de colonnes (le deuxième paramètre des colonnes), le système calculera le nombre de colonnes possible (c'est-à-dire qu'il prend auto comme paramètre de nombre de colonnes).

Vous avez spécifié une largeur de colonne «idéale» de 120 pixels et les éléments réels ont une largeur inférieure à cela. Par conséquent, le système estime que vous pouvez insérer 3 colonnes dans le conteneur de largeur 400px et disposer les deux premières en conséquence.

Voici quelques informations de https://developer.mozilla.org/en-US/docs/Web/CSS/column-width

La propriété CSS de largeur de colonne définit la largeur de colonne idéale dans une mise en page à plusieurs colonnes. Le conteneur aura autant de colonnes que possible sans qu'aucune d'entre elles n'ait une largeur inférieure à la valeur de largeur de colonne. Si la largeur du conteneur est plus étroite que la valeur spécifiée, la largeur de la colonne unique sera inférieure à la largeur de colonne déclarée.

Si vous voulez vous assurer qu'il n'y a que deux colonnes, donnez le deuxième paramètre:

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>