Every Layout

Une simple page de texte.

Fonction essentiel our une page simple:
body { max-with: 30rem; margin: auto }

Une page avec deux colonnes

Fonction essentiel pour deux colonnes:
section { display: flex; }

Une page avec deux colonnes et les images en zigzag.

Fonction essentiel pour deux colonnes avec les images en zigzag:
section:nth-of-type(even) {flex-direction: row-reverse;}

Une page simple avec 4 colonnes.

Fonction essentiel pour deux colonnes avec les images en zigzag:
body {display: flex;}

Une page simple avec un colonne.

Fonction essentiel pour deux colonnes avec les images en zigzag:
section { display: flex; gap: 2rem; flex-wrap: wrap;} h3 { flex: 0 0 100%; /* width: 100%; */} img{order: 3;}