comment faire une grille 12 colonnes avec CSS Grid comme celui proposé par Twitter Bootstrap, via un repeat(12,1fr)
Pour éviter que les colonnes ne se dilatent si le contenu (img, text) est plus large que la largeur de la colonne, il faut forcer la largeur des cellules
/*css*/
.grid{
display: grid;
grid-template-columns: repeat(12,1fr);
grid-gap: 20px;
border:1px solid #cea0e4;
}
/*css*/
.item{
min-width: 0;
/*forcer la largeur des cellules à 0*/
background: #ea4c88;
}
Il est possible d'utiliser des variables css directement dans le sélecteur pour augmenter la largeur de la cellule comme sur Bootstrap où l'on définit span3 :
/*css*/
.grid{
display: grid;
grid-template-columns: repeat(12,1fr);
grid-gap: 20px;
border:1px solid #cea0e4;
}
/*css*/
.item{
min-width: 0;
background: #ea4c88;
}
/*css*/
.item--special{
--span :3;/*première manière*/
grid-column: span var(--span);
}
Dernière possibilité intéressante, mettre dans la balise style de la balise une variable css. La fonction css var(valeur,fallback) possède deux arguments, si la valeur de --cols n'est pas définie, elle prendra la valeur du deuxième argument
/*css*/
.grid{
display: grid;
grid-template-columns: repeat(var(--cols,12),1fr);
grid-gap: 20px;
border:1px solid #cea0e4;
}
/*css*/
.item{
min-width: 0;
background: #ea4c88;
}