minmax(auto, calc(var(--liquid-content) / 2))
minmax(auto, calc(var(--liquid-content) / 2))
Liquid est un agencement CSS Grid Layout. Il permet de gérer facilement des éléments qui s'étendent sur toute la largeur de la page (appelés full-bleed, breakout, hero ou splash), tout en maintenant un contenu principal centré et lisible.
.liquid définit une largeur maximale pour le contenu et le
centre horizontalement.
.splash permet à un élément enfant de s'étendre sur toute
la largeur disponible.
.splash-start : l'élément s'étend du bord gauche
jusqu'à la fin de la zone de contenu.
.splash-end : l'élément s'étend du début de la zone de
contenu jusqu'au bord droit.
.splash-half-start : l'élément s'étend du bord gauche
jusqu'au milieu de la page.
.splash-half-end : l'élément s'étend du milieu de la
page jusqu'au bord droit.
.liquid peut être appliquée à n'importe quel conteneur, y
compris l'élément <body>.
Un élément de classe .splash s'étend sur toute la largeur
disponible :.splash {grid-column: liquid-start / liquid-end;}
Son contenu interne reste aligné avec la zone de contenu principale.
Les variantes .splash-start et
.splash-end permettent de positionner des éléments qui
s'étendent sur une partie de la largeur de la page, en partant des bords.
Un élément de classe .splash-start s'étend du bord gauche
jusqu'à la fin de la zone de contenu :.splash-start {grid-column: liquid-start / content-end;}
Un élément de classe .splash-end s'étend du début de la
zone de contenu jusqu'au bord droit :.splash-end {grid-column: content-start / liquid-end;}
Les variantes .splash-half-start et
.splash-half-end permettent de positionner des éléments sur
une moitié de la page.
Un élément de classe .splash-half-start s'étend du bord
gauche jusqu'au milieu de la page :.splash-half-start {grid-column: liquid-start / half;}
Un élément de classe .splash-half-end s'étend du milieu de
la page jusqu'au bord droit :.splash-half-end {grid-column: half / liquid-end;}
.liquid {
--liquid-spacer: 2rem; /* Espacement minimal sur les côtés */
--liquid-content: 1024px; /* Largeur maximale du contenu */
display: grid;
grid-template-columns:
[liquid-start] minmax(var(--liquid-spacer), 1fr) /* Marge latérale gauche */
[content-start] minmax(auto, calc(var(--liquid-content) / 2)) /* Moitié gauche du contenu */
[half] minmax(auto, calc(var(--liquid-content) / 2)) /* Moitié droite du contenu */
[content-end] minmax(var(--liquid-spacer), 1fr) /* Marge latérale droite */
[liquid-end];
}Pour bien visualiser, activez l'affichage de la grille via la case à cocher en bas de page.
Le système repose sur une grille CSS (display: grid)
composée de quatre colonnes principales. Les lignes de séparation entre
ces colonnes sont nommées pour faciliter le positionnement des éléments
enfants :
liquid-start : Début de la grille (bord gauche de la
page).
content-start : Début de la zone de contenu principale.
half : Milieu de la zone de contenu principale.content-end : Fin de la zone de contenu principale.
liquid-end : Fin de la grille (bord droit de la page).
Par défaut, les enfants directs du conteneur .liquid se
placent dans la zone de contenu (entre content-start et
content-end). Les classes spécifiques
(.splash, .splash-start, etc.) utilisent la
propriété grid-column pour indiquer sur quelles lignes de
la grille elles doivent s'étendre. Par exemple,
.splash-start {grid-column: liquid-start / content-end;}
signifie que l'élément commencera sur la ligne
liquid-start et se terminera sur la ligne
content-end.
minmax(var(--liquid-spacer), 1fr)
minmax(var(--liquid-spacer), 1fr)
minmax(auto, calc(var(--liquid-content) / 2))
minmax(auto, calc(var(--liquid-content) / 2))