CSS Grid et Design Responsive

Grilles et adaptation aux écrans

Séance 6 - DSP - USAL33

Rappel séance 5

Ce que nous avons vu

Flexbox

• display: flex pour activer Flexbox

• flex-direction pour la direction

• justify-content pour l’axe principal

• align-items pour l’axe perpendiculaire

• flex-wrap pour passer à la ligne

Aujourd’hui :

• CSS Grid pour des layouts en 2D

• Créer des grilles complexes

• Design responsive avec media queries

1. CSS Grid

Flexbox vs Grid

Flexbox : unidimensionnel

• Une direction à la fois (ligne OU colonne)

• Idéal pour les composants

Grid : bidimensionnel

• Lignes ET colonnes en même temps

• Idéal pour les layouts de page

Ils sont complémentaires, pas concurrents

Activer CSS Grid

.container {
    display: grid;
}

Effet immédiat :

• Les enfants deviennent des grid items

• Par défaut, ils s’empilent verticalement (1 colonne)

Pour créer plusieurs colonnes, il faut définir la grille

Définir les colonnes

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
}

Résultat : 3 colonnes de 200px chacune

Syntaxe : Chaque valeur = une colonne

/* 2 colonnes */
grid-template-columns: 300px 500px;

/* 4 colonnes égales */
grid-template-columns: 200px 200px 200px 200px;

L’unité fr (fraction)

fr = fraction de l’espace disponible

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

Résultat : 3 colonnes égales qui se partagent l’espace

Avantage : S’adapte automatiquement à la largeur du container

Mélanger fr et pixels

.container {
    display: grid;
    grid-template-columns: 250px 1fr;
}

Résultat :

• Colonne 1 : 250px fixe

• Colonne 2 : prend le reste de l’espace

Usage : Sidebar fixe + contenu flexible

Fonction repeat()

Éviter la répétition avec repeat()

/* Au lieu de */
grid-template-columns: 1fr 1fr 1fr 1fr;

/* On écrit */
grid-template-columns: repeat(4, 1fr);

Syntaxe : repeat(nombre, taille)

/* 3 colonnes de 200px */
grid-template-columns: repeat(3, 200px);

Définir les lignes

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 100px 200px;
}

Résultat :

• 3 colonnes égales

• 2 lignes : première de 100px, deuxième de 200px

En pratique : On définit rarement les lignes explicitement

Espacement avec gap

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

Effet : 20px d’espace entre chaque cellule

Variantes :

/* Espacement différent vertical/horizontal */
gap: 30px 20px; /* vertical horizontal */

/* Ou séparément */
row-gap: 30px;
column-gap: 20px;

Grille responsive avec auto-fit

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

Résultat :

• Crée autant de colonnes que possible

• Chaque colonne fait au minimum 250px

• S’adapte automatiquement à la largeur

Usage : Galeries d’images, grilles de cartes

Explication minmax()

minmax(min, max) = taille entre min et max

grid-template-columns: repeat(3, minmax(200px, 1fr));

Signification :

• Minimum : 200px

• Maximum : 1fr (s’étire si espace disponible)

Résultat : Colonnes flexibles avec taille minimale garantie

Positionner un item sur plusieurs colonnes

.item {
    grid-column: span 2;
}

Effet : L’item occupe 2 colonnes

Exemple :

.header {
    grid-column: span 3; /* Occupe 3 colonnes */
}

Usage : Headers, footers, éléments mis en avant

Positionner un item précisément

.item {
    grid-column: 1 / 3; /* De la ligne 1 à la ligne 3 */
    grid-row: 1 / 2;    /* De la ligne 1 à la ligne 2 */
}

Les lignes de la grille sont numérotées

    1      2      3      4
1   |  A   |  B   |  C   |
2   |  D   |  E   |  F   |
3   |  G   |  H   |  I   |

Exemple de grille complète

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.header {
    grid-column: span 3; /* Toute la largeur */
}

.sidebar {
    grid-column: 1;
    grid-row: 2 / 4; /* 2 lignes de hauteur */
}

.footer {
    grid-column: span 3;
}

2. Design Responsive

Qu’est-ce que le responsive ?

Responsive = qui s’adapte à la taille de l’écran

Un site responsive fonctionne sur :

• Ordinateur (1920px et plus)

• Tablette (768px à 1024px)

• Mobile (320px à 768px)

Objectif : Une seule version du site pour tous les appareils

Pourquoi c’est important ?

En 2026 :

• Plus de 60% du trafic web vient du mobile

• Google favorise les sites responsives dans les résultats

Sans responsive :

• Texte illisible sur mobile

• Utilisateurs qui zooment et scrollent horizontalement

• Mauvaise expérience utilisateur

Les media queries

Media queries = règles CSS selon la taille d’écran

/* Par défaut : mobile */
.container {
    padding: 10px;
}

/* À partir de 768px : tablette/desktop */
@media (min-width: 768px) {
    .container {
        padding: 40px;
    }
}

Le CSS dans la media query s’applique SEULEMENT si la condition est vraie

Syntaxe des media queries

@media (min-width: 768px) {
    /* CSS pour écrans de 768px et plus */
}

@media (max-width: 767px) {
    /* CSS pour écrans de 767px et moins */
}

@media (min-width: 768px) and (max-width: 1024px) {
    /* CSS pour écrans entre 768px et 1024px */
}

Approche mobile-first

Mobile-first = on commence par le mobile

/* Mobile par défaut */
.container {
    padding: 10px;
    font-size: 14px;
}

/* Tablette */
@media (min-width: 768px) {
    .container {
        padding: 20px;
        font-size: 16px;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .container {
        padding: 40px;
        font-size: 18px;
    }
}

Breakpoints courants

Breakpoints = points de rupture où le design change

Taille	Device	Breakpoint
Mobile	< 768px	Par défaut
Tablette	768px - 1024px	@media (min-width: 768px)
Desktop	> 1024px	@media (min-width: 1024px)

Ces valeurs ne sont pas fixes, adaptez-les à votre design

Exemple : navigation responsive

/* Mobile : menu vertical */
.nav {
    display: flex;
    flex-direction: column;
}

/* Desktop : menu horizontal */
@media (min-width: 768px) {
    .nav {
        flex-direction: row;
    }
}

Exemple : grille responsive

/* Mobile : 1 colonne */
.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

/* Tablette : 2 colonnes */
@media (min-width: 768px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop : 3 colonnes */
@media (min-width: 1024px) {
    .grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
}

Exemple : sidebar responsive

/* Mobile : pas de sidebar */
.layout {
    display: flex;
    flex-direction: column;
}

/* Desktop : sidebar + contenu */
@media (min-width: 1024px) {
    .layout {
        flex-direction: row;
    }
    
    .sidebar {
        flex: 0 0 250px;
    }
    
    .content {
        flex: 1;
    }
}

Unités relatives

Unités fixes :

• px : pixels, taille fixe

Unités relatives (meilleures pour le responsive) :

• % : pourcentage du parent

• em : relatif à la taille de police du parent

• rem : relatif à la taille de police racine

• vw : pourcentage de la largeur du viewport

• vh : pourcentage de la hauteur du viewport

Exemples d’unités relatives

/* Largeur en pourcentage */
.container {
    width: 90%; /* 90% de la largeur du parent */
    max-width: 1200px; /* Maximum 1200px */
}

/* Taille de police relative */
body {
    font-size: 16px;
}

h1 {
    font-size: 2rem; /* 2 × 16px = 32px */
}

/* Hauteur viewport */
.hero {
    height: 100vh; /* Hauteur de l'écran */
}

Balise meta viewport

Obligatoire dans le <head> pour le responsive

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Effet :

• width=device-width : largeur = largeur de l’écran

• initial-scale=1.0 : pas de zoom par défaut

Sans cette balise, le responsive ne fonctionne pas sur mobile

Images responsives

img {
    max-width: 100%;
    height: auto;
}

Effet :

• L’image ne dépasse jamais son container

• Elle garde ses proportions

Bonne pratique : Appliquer sur toutes les images

Masquer des éléments selon l’écran

/* Masquer sur mobile */
.desktop-only {
    display: none;
}

@media (min-width: 768px) {
    .desktop-only {
        display: block;
    }
}

/* Masquer sur desktop */
.mobile-only {
    display: block;
}

@media (min-width: 768px) {
    .mobile-only {
        display: none;
    }
}

Exercice pratique

Créer une grille responsive

Objectif : Galerie de 6 images qui s’adapte

Mobile : 1 colonne Tablette : 2 colonnes Desktop : 3 colonnes

<div class="gallery">
    <img src="img1.jpg" alt="Photo 1">
    <img src="img2.jpg" alt="Photo 2">
    
</div>

Créez le CSS pour obtenir ce comportement

Solution

.gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

.gallery img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

@media (min-width: 768px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .gallery {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

Résumé

Points clés CSS Grid

Pour créer une grille :

1. display: grid; sur le container

2. grid-template-columns pour définir les colonnes

3. gap pour espacer les cellules

Unité fr : Fraction de l’espace disponible

repeat() : Éviter la répétition

auto-fit + minmax() : Grille responsive automatique

Positionnement : grid-column: span X pour occuper plusieurs colonnes

Points clés Responsive

Media queries : Appliquer du CSS selon la taille d’écran

Approche mobile-first : Commencer par le mobile, ajouter pour desktop

Breakpoints courants :

• Mobile : < 768px

• Tablette : 768px - 1024px

• Desktop : > 1024px

Balise viewport : Obligatoire dans le <head>

Images : max-width: 100%; pour qu’elles s’adaptent

Grid vs Flexbox : quand utiliser quoi ?

Utilisez Grid pour :

• Layouts de page complets

• Grilles régulières (galeries, catalogues)

• Positionnement en 2D (lignes ET colonnes)

Utilisez Flexbox pour :

• Composants (navbars, cartes)

• Alignement en 1D (ligne OU colonne)

• Distribution d’espace flexible

Souvent, on combine les deux

Questions ?