Mode Modalités flexibles avec grille CSS

Sep 15, 2025

Comment

A woman sits at a laptop tweaking a CSS Grid layout

[dix] [dix] [dix]

[dix]

La grille CSS est parfaite pour créer des dispositions de lignes et de colonnes à deux axes. La syntaxe est simple et fait la mise en page de la page une brise. Les dispositions qui auraient nécessité de multiples conteneurs imbriqués peuvent maintenant être décrits simplement dans CSS.

[dix]

La grille fonctionne différemment aux autres propriétés de la présentation, car l'application de la valeur «grille» à la propriété «Affichage» affectera tous les enfants directs. Ces éléments sont maintenant des éléments de grille et seront positionnés en fonction des règles que vous avez définies sur le parent (sauf si elles sont spécialement placées).

Se familiariser avec la grille

La grille apporte un certain nombre de nouvelles fonctionnalités:

Écart de grille

Au lieu d'utiliser des marges, la grille a sa propre propriété pour définir des lacunes entre les éléments de la grille, permettant de définir la disposition de la grille d'être définie et non affectée par les lacunes. Les systèmes de grille (comme ceux trouvés dans Inuit et Twitter Bootstrap) s'appuient généralement sur la fixation de marges négatives afin d'aligner tout correctement.

L'unité fr

Court pour la fraction, cette nouvelle unité de mesure est utilisée pour diviser la mise en page en fractions, avec ou sans intervalle.

[dix]

Placement de grille

La grille CSS permet à tout élément d'être priorisée et positionnée n'importe où sur la grille avant tous les autres éléments, qui sont ensuite positionnés automatiquement.

Zones de grille et modèles

Les zones nommées sur la grille sont définies, qui peuvent ensuite être référencées pour définir la mise en page de manière presque ASCII.

[dix]

min max()

La valeur de la propriété 'Minmax ()' vous permet d'appliquer une taille minimale et maximale pour les éléments de grille, les colonnes et les lignes. Cette fonctionnalité est malheureusement manquante à partir de Flexbox et de chaque autre module de mise en page en CSS.

Construisez vos grilles

Les zones et modèles puissants de CSS Grid permettent de réaliser des aménagements compliqués. Vous commencez par appliquer un nom aux éléments de votre grille à l'aide de la propriété 'Grid-zone' - par exemple 'Header {Great-Zone: en-tête; } '. Une fois que vous avez nommé tous les domaines de votre grille, vous pouvez ensuite utiliser la propriété «Grid-Modèles-zones» pour décrire la mise en page.

 Grid-Modèles-Zones:
  "Hauteur d'en-tête d'en-tête"
  "Article de barre gauche de la barre droite"
  "Pied de page de pied de page"
;

L'exemple de code ci-dessus décrit une grille de trois sur trois, vous répétez simplement le nom de l'élément de la grille si vous souhaitez qu'il envoie plusieurs colonnes ou rangées. Vous pouvez également utiliser les requêtes multimédias afin de modifier la disposition de la grille pour des écrans de taille différente.

Vous pouvez ensuite utiliser la nouvelle unité 'FR' pour définir la manière dont la largeur est divisée parmi les différentes colonnes:

 Modèles de grille-colonnes: 1fr 3fr 1fr;

L'exemple indiqué ci-dessus divisera la largeur disponible en cinq valeurs de largeur égales; En d'autres termes, il appliquera une cinquième à la première colonne, trois cinquièmes à la deuxième colonne et le cinquième final à la colonne finale.

Afin de formater les lignes, vous pouvez utiliser la nouvelle valeur de la propriété «Minmax» pour former les colonnes haut et inférieures à leur contenu, puis laissez la rangée moyenne à couvrir l'espace restant dans la grille.

 Grid-Modèles-Rows:
  Minmax (contenu min-teneur, contenu max)
  auto
Minmax (contenu min-teneur, contenu max);

Cet article a été publié à l'origine dans le numéro 271 de la création Web Design Magazine Web Designer. Acheter numéro 271 ou Abonnez-vous à Web Designer .

Vous voulez renforcer vos compétences en grille CSS?

Brenda Storer is giving her talk Using CSS Grid in the Real World at Generate New York from 25 - 27 April 2018 — Brenda Storer donne sa conversation avec la grille CSS dans le monde réel à la génération de New York du 25 au 27 avril 2018

En tant que concepteur et développeur frontal à une agence de développement de logiciels, Brenda Stocker utilise CSS Grid en production pour des sites Web depuis sa sortie initiale aux navigateurs en mars 2017 et est un grand fan.

Dans son discours à Générez New York du 25 au 27 avril 2018 , Brenda montrera progressivement comment vous pouvez améliorer progressivement votre site avec la grille CSS et écrire une ballette à balle pour les navigateurs plus anciens (ou même continuer à utiliser votre frameau de la grille actuelle comme une cassette), toutes avec pure CSS: pas de JavaScript requis.

Générer New York a lieu du 25 au 27 avril 2018. Obtenez votre billet maintenant .

Articles Liés:

Secrets de mise en page de grille CSS révélés
Créer une mise en page réactive avec la grille CSS
Se mettre à la vitesse avec la grille CSS

[dix] [dix]

[dix]

Mode Modalités flexibles avec grille CSS

Se familiariser avec la grille

Construisez vos grilles

Vous voulez renforcer vos compétences en grille CSS?

Comment - Most Popular Articles

Commencez avec la flamme peintre

Affinity Designer: Comment utiliser l'exportation Persona

Améliorez vos compétences d'art conceptuelles dans Photoshop

Comment peindre comme un maître du XIXe siècle

Comment choisir avec les outils Lasso de Photoshop

Jump Début Réagissez Natif avec Expo

Comment illustrer un événement

Comment créer des personnages de dessins animés dans le cinéma 4D

Catégories