Pourquoi mon espace de colonne diminue-t-il lorsque j'augmente la largeur de mon conteneur?
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 width
du 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
La disposition des colonnes est un peu délicate. Si vous lisez la spécification relative à column-width
vous 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>
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>