minmax(auto, calc(var(--liquid-content) / 2))
minmax(auto, calc(var(--liquid-content) / 2))
Liquid est le nom d'un agencement réalisé en CSS Grid Layout compatible avec l'affichage de blocs qui "sortent" de la maquette, généralement appelés full-bleed, breakout, hero ou splash.
Caractéristiques du gabarit .liquid :
.liquid a une largeur de contenu maximum (--liquid-content) et est centré
dans la fenêtre. Le contenu "classique" s'y place automatiquement.
--liquid-spacer) est toujours présent afin que le conteneur ne soit pas
collé aux bords de fenêtre sur des petits écrans.
.splash déborde de la zone de contenu et occupe toute la surface..liquid peut être appliqué sur n'importe quel conteneur, voire sur body.
Un élément de classe .splash déborde de la zone de contenu et occupe toute la surface :.splash {grid-column: liquid-start / liquid-end;}
Son contenu s'aligne sur la zone de contenu générale.
Les variantes .splash-start et .splash-end permettent de placer les enfants d'un côté ou
de l'autre de la surface.
Un élément de classe .splash-start se place au début de la surface :.splash-start {grid-column: liquid-start / content-end;}
Un élément de classe .splash-end se place à la fin de la surface :.splash-end {grid-column: content-start / liquid-end;}
Les variantes .splash-half-start et .splash-half-end permettent de placer les enfants
d'un côté ou de l'autre de la surface, de part et d'autre du milieu de page.
Un élément de classe .splash-half-start se place au début de la surface et s'arrête en milieu de
page :.splash-half-start {grid-column: liquid-start / half;}
Un élément de classe .splash-half-end débute en milieu de page et termine au fin de la
surface :.splash-half-end {grid-column: half / liquid-end;}
.liquid {
--liquid-spacer: 2rem;
--liquid-content: 1024px;
display: grid;
grid-template-columns:
[liquid-start] minmax(var(--liquid-spacer), 1fr)
[content-start] minmax(auto, calc(var(--liquid-content) / 2))
[half] minmax(auto, calc(var(--liquid-content) / 2))
[content-end] minmax(var(--liquid-spacer), 1fr)
[liquid-end];
}TL;DR: Affichez la grille.
La grille principale contient tous les éléments et est découpée en quatre colonnes :
2rem (en vrai il s'agit
d'une variable) jusqu'à 1fr. Cela signifie que ces deux colonnes occupent tout l'espace
disponible dans la fenêtre, avec un minimum incompressible de "2rem"
auto (la taille
minimale pour le contenu) jusqu'à 1024px dans notre démo. En clair, c'est dans cette zone que va
se placer l'ensemble des contenus de la page afin qu'ils occupent 840px de large tout en demeurant fluides si
la fenêtre se réduit.
[liquid-start], la suivante [content-start] et ainsi de
suite jusqu'à la dernière tout à droite qui est [liquid-end].
.splash-start {grid-column: liquid-start / content-end;}. Tadaam !
minmax(var(--liquid-spacer), 1fr)
minmax(var(--liquid-spacer), 1fr)
minmax(auto, calc(var(--liquid-content) / 2))
minmax(auto, calc(var(--liquid-content) / 2))