Mise en page simple et réactive de la grille CSS moderne –

Dans cet article, nous montrerons comment créer une disposition de grille CSS moderne et réactive, en montrant comment utiliser le code de secours pour les anciens navigateurs, comment ajouter progressivement la grille CSS et comment restructurer la disposition dans les petits appareils et les éléments centraux. en utilisant les propriétés d'alignement.

Dans un précédent article nous avons exploré quatre techniques différentes pour créer facilement des dispositions de grille réactives. Cet article a été écrit en 2014 – avant que CSS Grid ne soit disponible – donc, dans ce tutoriel, nous utiliserons une structure HTML similaire mais avec une disposition de grille CSS moderne.

Tout au long de ce tutoriel, nous allons créer une démo avec mise en page de base en utilisant des flottants et ensuite améliorer avec CSS Grid. Nous allons démontrer de nombreux utilitaires utiles, tels que le centrage des éléments, la répartition des éléments et la modification facile de la disposition des petits périphériques en redéfinissant les zones de la grille et en utilisant les requêtes multimédias. Vous pouvez trouver le code dans ce stylo:

Voir le stylo css-grid-example4 par SitePoint ( @SitePoint ) sur CodePen .

Mise en page de la grille CSS moderne et réactive

Avant de nous lancer dans la création de notre démo de grille réactive, introduisons d'abord la grille CSS.

CSS Grid est un puissant système à deux dimensions qui a été ajouté à la plupart des navigateurs modernes en 2017. Il a radicalement changé la façon dont nous créons les dispositions HTML. Grid Layout nous permet de créer des structures de grille en CSS et non en HTML.

CSS Grid est pris en charge dans la plupart des navigateurs modernes à l'exception d'IE11, qui prend en charge une version plus ancienne du standard pouvant poser quelques problèmes. Vous pouvez utiliser caniuse.com pour vérifier le support.

Une disposition de grille a un conteneur parent avec la propriété display définie sur grid ou grille en ligne . Les éléments enfants du conteneur sont des éléments de grille implicitement positionnés grâce à un puissant algorithme Grid. Vous pouvez également appliquer différentes classes pour contrôler le placement, les dimensions, la position et d'autres aspects des éléments.

Commençons par une page HTML de base. Créez un fichier HTML et ajoutez le contenu suivant:

    
 Exemple de disposition de grille CSS 




  

     1 
  
  

     2 
  
  
  

     11 
  

Nous utilisons la sémantique HTML pour définir les sections en-tête, barre latérale, principale et pied de page de notre page. Dans la section principale, nous ajoutons un ensemble d'éléments en utilisant la balise