Des mises en page modernes en une ligne de CSS

Des propriétés CSS qui permettent de créer des mises en page utiles avec une seule ligne

• Centrer ! → place-items: center

• Pancake désassemblé → flex: [grow] [shrink] [baseWidth]

• Barre latérale → grid-template-columns: minmax([min],[max])

• Empilement pancake → grid-template-rows: auto 1fr auto

• Web classique → grid-template: auto 1fr auto / auto 1fr auto

• Grille sur 12 colonnes → grid-template-columns: repeat(12, 1fr)

• RAM (Repeat, Auto, MinMax) → grid-template-columns: repeat(auto-fit, minmax([base], 1fr))

• Garder l'espacement → justify-content: space-between

• Garder le style → width: clamp([min], [actual], [max])

• Garder les proportions → aspect-ratio → [width] / [height]

[xguru]

place-items et les pancakes sont vraiment très utiles.