Development #80527
flex-grid: variable CSS pour personnaliser la grille par cellule
0%
Description
Je propose d'introduire 2 variables CSS pour configurer la grille flexbox et ainsi pouvoir l'appliquer plus simplement à une cellule et pouvoir personnaliser la grille specifiquement pour une cellule :
`--grid-gutter` pour paramétrer la taille de la gouttière à un element.
`--nb-cols` pour indiquer le nombre de colonnes et ainsi pouvoir appliquer la grille flexbox via @extend sur un element
Demandes liées
Historique
Mis à jour par Robot Gitea il y a 8 mois
- Statut changé de Nouveau à Solution proposée
Thomas Jund (tjund) a ouvert une pull request sur Gitea concernant cette demande :
- URL : https://git.entrouvert.org/entrouvert/publik-base-theme/pulls/369
- Titre : css: introduce --grid-gutter & --nb-cols css vars for flex-grid (#80527)
- Modifications : https://git.entrouvert.org/entrouvert/publik-base-theme/pulls/369/files
Mis à jour par Thomas Jund il y a 8 mois
Ce patch permet par exemple d'appliquer une grid sur un element avec
.element {
@extend .fx-grid;
--grid-gutter: 3rem;
@media ($min-grid-tablet-viewport) {
--nb-cols: 2;
}
@media ($min-grid-desktop-viewport) {
--nb-cols: 4;
}
}
La grille a 1 colonne en mobile, 2 colonnes en tablet et 4 colonnes en desktop avec une gouttière personnalisée à `3rem`.
On peut bien sûr utiliser les classic breakpoints `$max-mobile-viewport` et `$min-desktop-viewport` tout comme personnaliser la valeur de --grid-gutter pour chaque viewport
Mis à jour par Robot Gitea il y a 8 mois
- Statut changé de Solution proposée à En cours
Corentin Sechet (csechet) a fermé une pull request sur Gitea concernant cette demande.
Mis à jour par Corentin Séchet il y a 8 mois
- Statut changé de En cours à Solution déployée
Mergée en même temps que #79825.
Mis à jour par Corentin Séchet il y a 8 mois
- Lié à Bug #80652: fx-grid : la largeur des cellules est cassée ajouté
Mis à jour par Corentin Séchet il y a 8 mois
- Lié à Bug #80870: Problème de grille sur les cellules fiches ajouté