CSS Grid - CodeIgniter 4 Content Management

CSS Grid

Le système de layout 2D le plus puissant de CSS. Créez des grilles complexes avec un contrôle précis sur lignes et colonnes.

📊 Layout 2D

🎨 Contrôle total

🔧 Layouts complexes

Flexbox vs Grid : Quand utiliser quoi ?

1D Flexbox (1 dimension)

✅ Idéal pour :

• Navigation horizontale/verticale
• Centrage et alignement
• Distribution d'espace
• Layouts en ligne ou colonne
• Composants UI simples

Flexbox : Direction unique

2D Grid (2 dimensions)

🚀 Parfait pour :

• Layouts de page complets
• Grilles de contenus
• Positionnement précis
• Designs complexes 2D
• Responsive avancé

Grid : Contrôle lignes ET colonnes

🎯 Anatomie d'une Grid

Terminologie :

Grid Container : Élément avec display: grid

Grid Items : Enfants directs du container

Grid Lines : Lignes de séparation (tracks)

Grid Cells : Intersection ligne × colonne

Grid Areas : Zones nommées multiples cells

Visualisation :

2 (span 2)

3 (span 2)

3 colonnes × 3 lignes avec spans et gaps

Propriétés du Grid Container

🚀 display: grid

                            /* Activation de CSS Grid */

                            .container {

                              display: grid;

                              grid-template-columns: 1fr 1fr 1fr;

                              gap: 1rem;

                            }

                            /* Alternative inline */

                            .container-inline {

                              display: inline-grid;

                            }

Résultat automatique :

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Placement automatique en grille 3×2

📏 grid-template-columns

Démo Interactive :

grid-template-columns: 1fr 1fr 1fr;

🔧 Unités CSS Grid :

Fraction d'espace disponible

auto

Taille du contenu

minmax()

Min/Max contraintes

repeat()

Répétition de pattern

📐 Gap et Alignement

Gap (espacement) :

Alignement :

                        gap: 10px;

                        justify-items: stretch;

                        align-items: stretch;

Grid Areas - Layout Sémantique

🗺️ grid-template-areas

Configuration du layout :

                            .layout {

                              display: grid;

                              grid-template-columns: 200px 1fr 200px;

                              grid-template-rows: 60px 1fr 40px;

                              grid-template-areas:

                                "header header header"

                                "sidebar main aside"

                                "footer footer footer";

                              gap: 10px;

                              height: 100vh;

                            }

                            /* Assignation des zones */

                            .header { grid-area: header; }

                            .sidebar { grid-area: sidebar; }

                            .main { grid-area: main; }

                            .aside { grid-area: aside; }

                            .footer { grid-area: footer; }

Résultat visuel :

HEADER

SIDE

MAIN CONTENT

ASIDE

FOOTER

✨ Avantages :

• Lisibilité parfaite du code
• Modification facile du layout
• Responsive avec media queries
• Sémantique et maintenable

📱 Responsive avec Grid Areas :

                        /* Desktop */

                        @media (min-width: 768px) {

                          .layout {

                            grid-template-areas:

                              "header header header"

                              "sidebar main aside"

                              "footer footer footer";

                          }

                        }

                        /* Mobile */

                        @media (max-width: 767px) {

                          .layout {

                            grid-template-columns: 1fr;

                            grid-template-areas:

                              "header"

                              "main"

                              "sidebar"

                              "aside"

                              "footer";

                          }

                        }

Exemples Pratiques

🖼️ Galerie d'Images Responsive

                            /* Galerie auto-responsive */

                            .gallery {

                              display: grid;

                              grid-template-columns: 

                                repeat(auto-fit, minmax(200px, 1fr));

                              gap: 1rem;

                              padding: 1rem;

                            }

                            .gallery img {

                              width: 100%;

                              height: 200px;

                              object-fit: cover;

                              border-radius: 8px;

                            }

🔥 Magie d'auto-fit :

• S'adapte à toutes les tailles d'écran
• Minimum 200px par colonne
• Maximum : remplit l'espace
• Aucune media query nécessaire !

Simulation :

Redimensionnez pour voir l'adaptation

🃏 Grille de Cards Complexe

                            /* Layout magazine */

                            .magazine {

                              display: grid;

                              grid-template-columns: repeat(4, 1fr);

                              grid-template-rows: repeat(3, 150px);

                              gap: 1rem;

                            }

                            .featured {

                              grid-column: span 2;

                              grid-row: span 2;

                            }

                            .highlight {

                              grid-column: span 2;

                            }

Layout Magazine :

FEATURED

HIGHLIGHT

📊 Dashboard Admin Complet

                            .dashboard {

                              display: grid;

                              grid-template-areas:

                                "header header header header"

                                "sidebar stats stats charts"

                                "sidebar recent recent activity";

                              grid-template-columns: 200px 1fr 1fr 300px;

                              grid-template-rows: 60px 200px 1fr;

                              gap: 1rem;

                              height: 100vh;

                            }

                            .header { grid-area: header; }

                            .sidebar { grid-area: sidebar; }

                            .stats { grid-area: stats; }

                            .charts { grid-area: charts; }

                            .recent { grid-area: recent; }

                            .activity { grid-area: activity; }

Dashboard Complexe :

HEADER

STATISTIQUES

GRAPHS

ACTIVITÉ RÉCENTE

NOTIFS

🚀 Avantages :

• Layout complexe en quelques lignes
• Zones parfaitement définies
• Responsive facile à implémenter
• Maintenance simplifiée

Exercices Pratiques

🏗️ Exercice 1 : Portfolio d'Architecte

🎯 Mission :

Créez un portfolio d'architecte avec une galerie asymétrique et des zones de contenu variées.

📋 Requis :

• Header avec navigation
• Galerie asymétrique (certaines images plus grandes)
• Section "À propos" avec texte et photo
• Grid responsive : desktop → tablet → mobile
• Utiliser grid-template-areas
• Images de tailles variables avec grid-column/row spans

🎨 Maquette :

HEADER NAVIGATION

PROJET FEATURED

PROJET A

PROJET WIDE

À PROPOS + PHOTO

CONTACT

Layout asymétrique avec spans variés

🚀 Code de Démarrage

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio Architecte - CSS Grid</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Arial', sans-serif;
            background: #f8f9fa;
        }
        
        .portfolio {
            /* TODO: Créer un grid container avec areas */
            display: grid;
            /* TODO: Définir grid-template-columns pour 6 colonnes */
            /* TODO: Définir grid-template-rows avec hauteurs variables */
            /* TODO: Créer grid-template-areas pour desktop */
            gap: 1rem;
            padding: 1rem;
            min-height: 100vh;
        }
        
        .header {
            /* TODO: Assigner grid-area: header */
            background: #2c3e50;
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 2rem;
            border-radius: 8px;
        }
        
        .project-featured {
            /* TODO: Assigner grid-area et spans pour projet principal */
            background: linear-gradient(135deg, #e74c3c, #c0392b);
            color: white;
            border-radius: 8px;
            padding: 2rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        
        .project {
            background: #3498db;
            color: white;
            border-radius: 8px;
            padding: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }
        
        .project:nth-child(4) { background: #2ecc71; }
        .project:nth-child(5) { background: #f39c12; }
        .project:nth-child(6) { background: #9b59b6; }
        .project:nth-child(7) { background: #1abc9c; }
        
        .about {
            /* TODO: Assigner grid-area et gérer le contenu */
            background: white;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .contact {
            /* TODO: Assigner grid-area avec span vertical */
            background: linear-gradient(135deg, #e67e22, #d35400);
            color: white;
            padding: 2rem;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        
        /* TODO: Media Queries */
        @media (max-width: 768px) {
            .portfolio {
                /* TODO: Adapter grid pour tablet */
                grid-template-columns: 1fr 1fr;
                grid-template-areas:
                    "header header"
                    "featured featured"
                    "project1 project2"
                    "about about"
                    "contact contact";
            }
        }
        
        @media (max-width: 480px) {
            .portfolio {
                /* TODO: Adapter grid pour mobile */
                grid-template-columns: 1fr;
                grid-template-areas:
                    "header"
                    "featured"
                    "about"
                    "projects"
                    "contact";
            }
        }
    </style>
</head>
<body>
    <div class="portfolio">
        <header class="header">
            <h1>Architecture Studio</h1>
            <nav>
                <a href="#" style="color: white; text-decoration: none; margin: 0 1rem;">Projets</a>
                <a href="#" style="color: white; text-decoration: none; margin: 0 1rem;">À propos</a>
                <a href="#" style="color: white; text-decoration: none; margin: 0 1rem;">Contact</a>
            </nav>
        </header>
        
        <div class="project-featured">
            <h2>Projet Principal</h2>
            <p>Villa Moderne</p>
        </div>
        
        <div class="project">Résidentiel A</div>
        <div class="project">Bureau B</div>
        <div class="project">Commercial C</div>
        <div class="project">Culturel D</div>
        
        <section class="about">
            <h3>À Propos</h3>
            <p>Studio d'architecture spécialisé dans les projets durables et innovants. 
               Plus de 15 ans d'expérience dans la conception de bâtiments respectueux 
               de l'environnement.</p>
        </section>
        
        <div class="contact">
            <h3>Contact</h3>
            <p>hello@archi-studio.com</p>
            <p>+33 1 23 45 67 89</p>
        </div>
    </div>
</body>
</html>
                

Maîtrisez CSS Grid ! 🎛️

Vous avez découvert la puissance de CSS Grid pour créer des layouts 2D complexes. Combinez Grid et Flexbox pour des interfaces parfaites !

💡 Conseil d'Expert :

Grid pour les layouts globaux (structure de page) • Flexbox pour les composants (navigation, cards) • Combinez les deux pour une puissance maximale !