📐 Exemples de base de CSS Grid avec Media Queries¶

1. Exemple de base : une grille simple¶

HTML :

<div class="grid-base">
  <div>Bloc 1</div>
  <div>Bloc 2</div>
  <div>Bloc 3</div>
</div>

CSS :

.grid-base {
  display: grid;
  grid-template-columns: 1fr; /* une colonne par défaut (mobile) */
  gap: 1rem;
}

@media screen and (min-width: 600px) {
  .grid-base {
    grid-template-columns: 1fr 1fr; /* 2 colonnes dès 600px */
  }
}

@media screen and (min-width: 900px) {
  .grid-base {
    grid-template-columns: 1fr 1fr 1fr; /* 3 colonnes dès 900px */
  }
}

Demo

2. Exemple : cacher des enfants sur petits écrans¶

HTML :

<div class="grid-hide">
  <div>Bloc A</div>
  <div>Bloc B</div>
  <div class="optional">Bloc C (optionnel)</div>
</div>

CSS :

.grid-hide {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* Bloc C caché par défaut (mobile) */
.optional {
  display: none;
}

@media screen and (min-width: 600px) {
  .grid-hide {
    grid-template-columns: 1fr 1fr;
  }

  .optional {
    display: block;
    /* affiché à partir de 600px */
    grid-column: 1 / span 2;
    /*prend 2 colonnes de large*/
  }
}

@media screen and (min-width: 900px) {
  .grid-hide {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .optional {
    grid-column: 3;
    /*se place à la 3e colonne*/
  }
}

Demo

3. Exemple : changer l’ordre des éléments¶

HTML :

<div class="grid-order">
  <div class="header">En-tête</div>
  <div class="sidebar">Menu</div>
  <div class="content">Contenu principal</div>
</div>

CSS :

.grid-order {
    display: grid;
    grid-template-areas:
        "header"
        "content"
        "sidebar";
    /* sur mobile : menu en bas */
    gap: 1rem;
}

header {
    grid-area: header;
    background-color: lightblue;
}

#sidebar {
    grid-area: sidebar;
    background-color: lightgreen;
}

main {
    grid-area: content;
    background-color: lightcoral;
}

/* Ordre différent sur tablettes */
@media screen and (min-width: 600px) {
    .grid-order {
        grid-template-columns: 1fr 3fr;
        grid-template-areas:
            "header header"
            "sidebar content";
        /* menu à gauche */
    }
}

/* Ordre encore différent sur desktop */
@media screen and (min-width: 900px) {
    .grid-order {
        grid-template-columns: 1fr 4fr 1fr;
        grid-template-areas:
            "header header header"
            "content content sidebar";
        /* menu à gauche mais plus étroit */
    }
}

Demo

✅ À retenir¶

Mobile first : écrire les styles pour mobile, puis adapter avec requêtes média.
Grid-template-areas simplifie la gestion de l’ordre visuel.
Grid-template-columns aide a indiquer des proportions de colonnes.
On peut cacher/afficher ou réordonner les enfants selon la taille d’écran.