1. CSS Grid Layout : la mise en page bidimensionnelle

Tandis que Flexbox gère un axe à la fois, CSS Grid permet de composer simultanément les lignes et les colonnes d’une mise en page complexe. Il libère l’intégrateur des contraintes d’imbrication artificielle de conteneurs :

.grille-cours {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    padding: 2rem 0;
}

L’instruction repeat(auto-fit, minmax(280px, 1fr)) génère automatiquement un nombre dynamique de colonnes parfaitement fluides sans nécessiter la moindre media query !

2. La philosophie Mobile-First

La démarche Mobile-First consiste à concevoir et coder d’abord les styles destinés aux écrans mobiles les plus étroits, puis à enrichir progressivement l’expérience pour les tablettes et écrans larges à l’aide de media queries min-width :

/* Styles de base pour smartphones (par défaut) */
.colonne-sidebar {
    display: none;
}

/* Écrans de bureau (Desktop) */
@media (min-width: 1024px) {
    .colonne-sidebar {
        display: block;
        width: 300px;
    }
}

3. Les unités relatives modernes : rem, ch, vh, vw

Bannissez les dimensions figées en pixels (px) pour les typographies et espacements. L’usage de l’unité relative rem (fondée sur la taille de police racine définie par l’utilisateur) assure une adaptation parfaite aux paramètres d’accessibilité visuelle du navigateur.

Synthèse pédagogique : Penser mobile d’abord force l’épuration éditoriale et la priorisation des informations vitales avant toute fioriture cosmétique.

PreviousNext