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.
[data-layout="liquid"] définit une largeur maximale pour le
contenu et le centre horizontalement.
data-layout="splash" permet à un élément enfant de
s'étendre sur toute la largeur disponible.
data-layout="splash-start" : l'élément s'étend du bord
gauche jusqu'à la fin de la zone de contenu.
data-layout="splash-end" : l'élément s'étend du début
de la zone de contenu jusqu'au bord droit.
data-layout="splash-half-start" : l'élément s'étend du
bord gauche jusqu'au milieu de la page.
data-layout="splash-half-end" : l'élément s'étend du
milieu de la page jusqu'au bord droit.
data-layout="liquid" peut être appliqué à n'importe quel
conteneur, y compris l'élément <body>.
Un élément avec data-layout="splash" s'étend sur toute la
largeur.
Son contenu interne reste aligné avec la zone de contenu principale.
Les variantes data-layout="splash-start" et
data-layout="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 avec data-layout="splash-start" s'étend du bord
gauche jusqu'à la fin de la zone de contenu. Son contenu interne reste
aligné avec la zone de contenu principale.
Un élément avec data-layout="splash-end" s'étend du début
de la zone de contenu jusqu'au bord droit. Son contenu interne reste
aligné avec la zone de contenu principale.
Les variantes data-layout="splash-half-start" et
data-layout="splash-half-end" permettent de positionner des
éléments sur une moitié de la page.
Un élément avec data-layout="splash-half-start" s'étend du
bord gauche jusqu'au milieu de la page.
Un élément avec data-layout="splash-half-end" s'étend du
milieu de la page jusqu'au bord droit.
/* Liquid */
[data-layout*="liquid"] {
--liquid-min-margin: var(--spacing-16, 1rem);
--liquid-content: var(--spacing-2xl, 1280px);
display: grid;
grid-template-columns:
[liquid-start] minmax(var(--liquid-min-margin), 1fr)
[content-start] minmax(0, calc(var(--liquid-content) / 2))
[half] minmax(0, calc(var(--liquid-content) / 2))
[content-end] minmax(var(--liquid-min-margin), 1fr)
[liquid-end];
:where(& > *) {
grid-column: content;
}
}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
[data-layout="liquid"] se placent dans la zone de contenu
(entre content-start et content-end). Les
attributs spécifiques (data-layout="splash",
data-layout="splash-start", etc.) utilisent la propriété
grid-column pour indiquer sur quelles lignes de la grille
elles doivent s'étendre. Par exemple,
[data-layout="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))