15 Grille CSS

Le but de ce TP est de mettre en pratique les grilles CSS vues ensemble en cours.

Un premier exemple (simple)

Nous allons utiliser les images issues de cette archive représentant les skeksis du film/série télé Dark Crystal.

Un document et une mise en forme simple

1. Créer un document HTML contenant le squelette de base de tout document HTML5,
2. Au sein de la balise main ajouter une balise img pour chaque image contenue dans l'archive
3. Ajouter un reset CSS à ce document
4. Ajouter un fichier de mise en forme css à ce document contenant les règles ci-dessous:

main {
    max-width: 1024px;
    margin: 0 auto;
}

img {
    display: block;
    margin: 0 auto;
    max-width: 100%
}

Nos images devraient s'afficher les unes en dessous des autres et être centrées horizontalement dans notre document.

Notre première grille

Nous allons créer une grille pour mettre les images les unes à côté des autres, notre grille devra contenir 5 colonnes par lignes.

Dans un premier temps nous allons appliquer la grille sur notre balise main:

main {
    max-width: 1024px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

Que constatez-vous ?

Un exemple plus avancé

Notre document précédent n'est pas sémantiquement correct, il nous faut corriger cela !

1. Commenter le css qui à transformer notre balise main en grille
2. Pour chaque image créer un article qui contiendra en plus de l'image le nom du Skeksis (vous pouvez le retrouver à partir du nom de l'image)
3. Nos articles devront être dans une balise section
4. Créer une grille de 5 colonnes pour afficher les articles.

Placement des éléments dans la grille

En reprenant le document précédent, servez-vous de la disposition des grilles pour placer les articles pairs sur 3 colonnes et les articles impairs sur 2 colonnes. Attention a bien géré les lignes où seront affichés les éléments.

Un placement plus complexe

En reprenant votre grille dans un nouveau fichier, retirer les titres de niveau 2 au sein de vos articles puis ajouter l'image suivante dans un nouvel article:

Et placer les différents articles au sein de la grille pour obtenir le résultat suivant:

Star Wars

En reprenant le TP sur la saga Star Wars afficher les films de la page d'accueil dans une grille de 3 colonnes.