LEÇON 3

1.1 Définir un conteneur de grille

Pour commencer à utiliser CSS Grid, vous devez d'abord définir un conteneur de grille en utilisant la propriété display: grid;.

div {
                                    display: grid;
                                }

1.2 Définir des lignes et des colonnes

Vous pouvez définir des lignes et des colonnes en utilisant les propriétés grid-template-rows et grid-template-columns.

div {
                                display: grid;
                                grid-template-rows: 100px 200px;
                                grid-template-columns: 1fr 2fr 1fr;
                                }

1.3 Placer des éléments dans la grille

Pour placer des éléments dans la grille, vous pouvez utiliser les propriétés grid-row et grid-column.

div.item1 {
                                    grid-row: 1;
                                    grid-column: 1 / span 2;
                                 }

Cela placera l'élément dans la première ligne et l'étendra sur deux colonnes.

1.4 Espacement entre les éléments

Vous pouvez ajouter de l'espacement entre les éléments de la grille en utilisant la propriété grid-gap.

div {
                                    display: grid;
                                    grid-gap: 20px;
                                }

2.1 Ajouter des animations

Animations CSS

2.1 Ajouter des animations

Pour ajouter des animations en CSS, vous pouvez utiliser les propriétés @keyframes et animation.

@keyframes example {
                            from {background-color: red;}
                            to {background-color: yellow;}
                        }
                        div {
                            animation: example 5s infinite;
                        }

3.1 Exemple de projet

Vous pouvez combiner CSS Grid et les animations CSS pour créer des mises en page dynamiques et interactives. Voici un exemple de projet qui montre comment utiliser ces deux technologies ensemble.

body {
                            display: grid;
                            grid-template-columns: repeat(3, 1fr);
                            grid-gap: 10px;
                        }
                        div {
                            width: 100%;
                            height: 100px;
                            background-color: lightblue;
                            animation: changeColor 2s infinite;
                        }
                        @keyframes changeColor {
                            0% { background-color: lightblue; }
                            50% { background-color: lightgreen; }
                            100% { background-color: lightblue; }
                        }

Le CSS Grid présente de nombreux avantages par rapport aux autres techniques de mise en page :

• Simplicité et lisibilité du code
• Flexibilité et adaptabilité
• Meilleur contrôle sur les alignements et les espacements
• Support natif par la majorité des navigateurs modernes

4.1 Exemples de mises en page avec CSS Grid

Voici quelques exemples de mises en page que vous pouvez réaliser avec CSS Grid :

/* Exemple de grille de base */
                        .container {
                            display: grid;
                            grid-template-columns: repeat(3, 1fr);
                            grid-gap: 10px;
                        }
                        
                        /* Exemple de grille avec des éléments de différentes tailles */
                        .item1 { grid-column: 1 / 3; }
                        .item2 { grid-column: 2 / 4; }
                        .item3 { grid-column: 1 / 2; }
                        .item4 { grid-column: 3 / 4; }

5.1 Animation de transformation

Les transformations CSS permettent de déplacer, faire pivoter, redimensionner et incliner des éléments. Vous pouvez animer ces transformations en utilisant la propriété transform.

@keyframes transformExample {
                            from { transform: rotate(0deg); }
                            to { transform: rotate(360deg); }
                        }
                        div {
                            animation: transformExample 2s infinite;
                        }

5.2 Animation d'opacité

Vous pouvez animer l'opacité d'un élément en utilisant la propriété opacity.

@keyframes opacityExample {
                            from { opacity: 1; }
                            to { opacity: 0; }
                        }
                        div {
                            animation: opacityExample 2s infinite alternate;
                        }

5.3 Animation de couleur

Vous pouvez animer la couleur d'un élément en utilisant la propriété color.

@keyframes colorExample {
                    from { color: black; }
                    to { color: red; }
                }
                div {
                    animation: colorExample 2s infinite alternate;
                }

5.4 Animation de plusieurs propriétés

Vous pouvez animer plusieurs propriétés en même temps en définissant plusieurs @keyframes et les incluant dans la propriété animation.

@keyframes multiExample {
                    0% { transform: scale(1); opacity: 1; }
                    50% { transform: scale(1.5); opacity: 0.5; }
                    100% { transform: scale(1); opacity: 1; }
                }
                div {
                    animation: multiExample 4s infinite;
                }

Voici quelques ressources supplémentaires pour vous aider à approfondir vos connaissances sur CSS Grid et les animations CSS :

• Documentation MDN sur CSS Grid
• Guide complet de CSS Grid par CSS-Tricks
• Documentation MDN sur les animations CSS
• Guide complet des animations CSS par CSS-Tricks

Voici quelques pratiques recommandées pour utiliser CSS Grid et les animations CSS de manière efficace :

• Utilisez des noms de classes descriptifs pour faciliter la compréhension du code.
• Testez vos mises en page et animations sur différents navigateurs pour assurer la compatibilité.
• Utilisez des animations avec parcimonie pour éviter de surcharger l'utilisateur.
• Optimisez les performances de vos animations en utilisant les propriétés transform et opacity plutôt que les propriétés qui déclenchent des recalculs de mise en page.

Conclusion

Le CSS Grid et les animations CSS sont des outils puissants pour créer des sites web modernes et interactifs. En combinant ces techniques, vous pouvez concevoir des interfaces utilisateur sophistiquées et dynamiques qui améliorent l'expérience utilisateur.

N'hésitez pas à expérimenter avec ces technologies et à explorer les nombreuses possibilités qu'elles offrent pour vos projets web.