Mise en page basée sur une grille (et grid-area)

1-Réflexions sur le découpage de la grille

  1. Combien de colonnes ? Taille ?
  2. Combien de lignes ? Taille ?
  3. Comment sont placées les cellules ? (header, nav, articles, footer)

2-Mise en oeuvre

  1. Mise en place du code HTML
  2. Structure générale de la grille en CSS
  3. Placement du grid-template-areas + des grid-areas
  4. Formatages

Mise en page en grille

1. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
2. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
3. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod.
4. Donec sed odio dui. Curabitur blandit tempus porttitor.
5. Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis.
6. Curabitur blandit tempus porttitor. Donec sed odio dui.
7. Nullam quis risus eget urna mollis ornare vel eu leo.
8. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.