recherche

Maison >interface Web >tutoriel CSS >Guide du débutant sur la disposition de la grille CSS

Guide du débutant sur la disposition de la grille CSS

尊渡假赌尊渡假赌尊渡假赌
尊渡假赌尊渡假赌尊渡假赌original
2025-02-08 13:19:08538parcourir

Guide du débutant sur la disposition de la grille CSS

Le module de mise en page CSS Grid a révolutionné la façon dont les sites Web sont construits. Il propose des outils qui permettent des dispositions avancées sans les hacks délicats et les solutions inventives du passé.

Dans cette introduction à la grille, nous allons parcourir les bases du fonctionnement de la disposition de la grille, et nous examinerons de nombreux exemples simples de la façon de l'utiliser dans la pratique.

Les plats clés

  1. Introduction à la disposition de la grille CSS: L'article fournit une compréhension fondamentale de la grille CSS en tant que système de disposition puissant dans CSS, expliquant comment transformer les éléments en un cadre de réseau de lignes et de colonnes pour le placement structuré du contenu. Il couvre les bases de la transformation d'un élément en un récipient de grille et ses enfants directs en articles de grille.

  2. Structure de la grille et placement des éléments: les caractéristiques essentielles de la grille CSS sont explorées, notamment la définition des structures de grille à l'aide de propriétés telles que les colonnes de la grille-template, les lignes de contex de grille et les zones de la grille. Le tutoriel montre des éléments de grille d'espacement avec la propriété GAP et les organisant en lignes et colonnes spécifiques pour une disposition précise.

  3. Conception réactive avec grille CSS: L'adaptabilité de la grille CSS pour la conception Web réactive est mise en évidence, montrant comment les requêtes multimédias peuvent être utilisées pour modifier les dispositions de grille pour différentes tailles d'écran. Des techniques avancées telles que le chevauchement des éléments de la grille et la création de dispositions réactives sans requêtes multimédias sont également discutées, mettant l'accent sur la polyvalence du réseau CSS dans la conception Web moderne.

Début avec la mise en page de la grille

Une grille est un cadre de colonnes et de lignes dans lesquelles nous pouvons placer du contenu. (C'est un peu comme une disposition de table, mais sur les stéroïdes!)

Le début de la grille est aussi simple que de faire ceci: 

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

Maintenant, tous les enfants directs de l'élément .Container seront des «articles de grille». Pour commencer, ils apparaîtront comme un tas de lignes dans une seule colonne, comme indiqué dans la démo ci-dessous.

Voir le stylo
CSS Prid Basics: Afficher: Grid by SitePoint (@SitePoint)
sur Codepen.

Dans l'exemple ci-dessus, nous avons un élément qui agit comme le conteneur. À l'intérieur, nous avons plusieurs éléments, qui sont maintenant des éléments de grille: 

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

Jusqu'à présent, nous n'avons pas beaucoup réalisé, car nous obtiendrions le même résultat sans affichage: Grid.

Lire plus approfondie:

  • Dans la démo ci-dessus, le conteneur est centré dans la fenêtre. En savoir plus sur les éléments centrés avec la grille.

Régler un écart entre les éléments de la grille

Espacez-nous un peu d'abord nos divs avec la propriété GAP: 

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

Voir les bases de la grille CSS
CSS: Gap by SitePoint (@SitePoint)
sur Codepen.

La propriété GAP insère un espace entre les éléments verticalement et horizontalement, comme nous le verrons sous peu. (Nous pouvons définir différentes lacunes horizontales et verticales si nous en avons besoin.)

Lire plus approfondie:

  • En savoir plus sur la propriété GAP.

Configuration des colonnes de grille

Actuellement, nous avons une grille «implicite» - ce qui signifie que le navigateur est simplement une grille pour lui-même, car nous n'avons pas encore spécifié de lignes ou de colonnes. Par défaut, nous obtenons simplement une colonne et quatre lignes - une pour chaque élément de grille. Spécions maintenant certaines colonnes: 

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

Avec des colonnes de saignement de grille, nous spécifions que nous voulons quatre colonnes chacune avec une largeur de 1FR, ou une fraction de l'espace disponible. (Au lieu de 1FR 1FR 1FR 1FR, nous pourrions écrire la répétition (4, 1FR) en utilisant la fonction Repeat () très pratique.)

Maintenant, nos éléments de grille sont disposés en une ligne, comme indiqué ci-dessous.

Voir le stylo
CSS Basics Grid: Grid-Template-colonnes par SitePoint (@SitePoint)
sur Codepen.

Lire plus approfondie:

  • Plus d'informations sur la grille-template-colonnes.
  • En savoir plus sur l'unité de longueur flexible (FR).
  • Comment utiliser la fonction Repeat () de Grid.

Organiser des éléments de la grille en lignes et colonnes

Organions maintenant nos éléments de grille en lignes et colonnes, comme nous pourrions les voir sur une disposition standard de la page Web.

Tout d'abord, nous spécifierons trois lignes avec la propriété Rou-Rows de la grille: 

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>gap: 10px;
</span><span>}
</span>

Si nous ajoutons cette ligne au stylo ci-dessus, peu de choses se produiront encore, car nous n'avons pas précisé comment nous voulons que nos articles de grille s'intègrent dans ces lignes et colonnes. (Notez à nouveau que Auto Auto Auto pourrait être écrit en tant que répétition (3, auto) à l'aide de la fonction Repeat ().)

Lire plus approfondie:

  • Plus d'informations sur les lignes de tempête de grille.
  • Comment utiliser la fonction Repeat () de Grid.

Placer des éléments de la grille sur la grille

Les outils de développeur de notre navigateur sont très utiles pour comprendre la disposition de la grille CSS. Si nous inspectons notre code jusqu'à présent, nous pouvons voir les lignes de grille horizontales et verticales qui définissent notre grille, comme illustré ci-dessous.

Guide du débutant sur la disposition de la grille CSS

Il y a cinq lignes de grille verticale et quatre lignes de grille horizontales, toutes numérotées. Nous pouvons utiliser ces lignes de grille pour spécifier comment nous voulons que nos éléments de grille soient disposés.

Définissons d'abord l'élément pour courir les quatre colonnes et une ligne: 

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

Cela indique que le commence à la ligne de colonne de grille numérotée 1 et se termine à la ligne de colonne numérotée 5. Il indique également que le commence à la première ligne de ligne de grille. Parce qu'une ligne d'extrémité n'est pas spécifiée, elle s'étend simplement à la ligne de ligne suivante, donc Grid-Row: 1 est équivalent à Grid-Row: 1 / 2.

faisons quelque chose de similaire au : 

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

La seule différence ici est que nous avons défini le pour nous asseoir entre les lignes de ligne de grille 3 et 4.

Maintenant, positionnons les éléments et

: 

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>gap: 10px;
</span><span>}
</span>

Le résultat est montré dans le stylo ci-dessous.

Voir les bases de la grille CSS
CSS: placer des éléments avec des lignes numérotées par SitePoint (@SitePoint)
sur Codepen.

Nous avons maintenant une disposition flexible et réactive sans flottement, débordements et autres cauchemars du passé. Si nous ajoutons du contenu à nos éléments de grille, ils se développeront pour contenir ce contenu, et les colonnes côte à côte auront toujours une hauteur égale. (Pour ceux qui travaillent avec CSS dans les années 90, atteindre des colonnes à hauteur égale était un cauchemar!)

des choses utiles à savoir sur les lignes de grille numérotées

Si vous regardez à nouveau l'image ci-dessus, vous verrez que, en bas, les lignes verticales sont également nommées avec des nombres négatifs. Chaque ligne de grille a un nombre positif et négatif. Cela a beaucoup d'utilisations, comme lorsqu'il y a beaucoup de lignes de grille et nous ne savons pas nécessairement combien il y en aura. Nous pourrions définir notre élément pour s'étendre sur les cinq colonnes avec une colonne de grille: 1 / -1, car la dernière ligne verticale est numérotée à la fois 5 et -1.

La grille a également un mot clé Span, que nous pouvons utiliser pour dire à un élément de courir un certain nombre de lignes ou de colonnes. Une autre option pour notre disposition serait d'écrire une colonne de grille: 1 / Span 4. Cela indique à l'élément de commencer à la première ligne de grille et de s'étendre sur toutes nos quatre colonnes.

Essayez ces variations dans le stylo ci-dessus.

Lire plus approfondie:

  • en savoir plus sur les lignes de grille.
  • La direction dans laquelle les lignes de grille sont numérotées est affectée par le mode d'écriture de notre disposition.
  • En savoir plus sur la colonne de grille.
  • Lire sur le mot clé Span dans la spécification de la grille.

Placement des éléments de grille à l'aide de lignes de grille nommées

Nous avons vu comment organiser des éléments sur la grille à l'aide de lignes de grille numérotées. Mais nous pouvons également donner des noms à certaines ou toutes nos lignes de grille et faire référence à celles à la place - ce qui peut être un peu plus intuitif et nous sauver des lignes de grille de comptage.

mettons à jour notre mise en page pour inclure certaines lignes nommées: 

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

Dans le code ci-dessus, nous n'avons nommé que trois lignes de grille verticales. Les noms vont entre crochets à côté de nos largeurs de colonne, représentant nos lignes de colonne.

Nous pouvons maintenant placer certains de nos éléments sur la grille comme: 

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

Nous pouvons voir ce code en pratique dans la démo ci-dessous.

Voir les bases de la grille CSS
CSS: placer des éléments avec des lignes nommées par SitePoint (@SitePoint)
sur Codepen.

Lire plus approfondie:

  • En savoir plus sur les lignes de grille nommées.
  • Lire sur les lignes nommées dans la spécification de la grille.

Placer les éléments de la grille à l'aide de zones de grille nommées

L'une des caractéristiques les plus intéressantes et les plus «conviviales» de la disposition de la grille est la possibilité de nommer des zones de grille - c'est-à-dire une ou plusieurs cellules de la grille - de manière simple et intuitive, puis utilisez ces noms pour Disposez nos articles de grille. Cela fonctionne comme ceci: 

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>gap: 10px;
</span><span>}
</span>

En utilisant la grille-template-areas, nous avons dessiné une grille de texte simple spécifiant la façon dont nous voulons que les éléments soient disposés. Maintenant, nous avons juste besoin d'appliquer ces noms de zone à nos éléments: 

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>gap: 10px;
</span>  <span>grid-template-columns: 1fr 1fr 1fr 1fr;
</span><span>}
</span>

Ainsi, le s'étendra sur les quatre colonnes, l'élément sera juste assis dans la première colonne de la deuxième ligne, et ainsi de suite.

Nous pouvons voir cela en action dans le stylo ci-dessous.

Voir les bases de la grille CSS
CSS: placer des éléments à l'aide de zones de noms par SitePoint (@SitePoint)
sur Codepen.

Ce code est beaucoup plus simple que ce que nous avions plus tôt - que ce soit en utilisant des lignes numérotées ou nommées. L'utilisation de zones de grille nommées comme celle-ci est presque gênante - comme utiliser un éditeur WYSIWYG au lieu d'écrire du code réel. Mais soyez assuré, ce n'est pas de la triche! C'est juste super cool.

en utilisant des numéros de ligne et des lignes nommées avec des zones de grille

Il convient de noter que nous pouvons également utiliser les numéros de ligne et / ou les lignes nommées pour définir les zones de grille. Par exemple, au lieu d'utiliser la propriété de la grille-template-areas, nous pourrions simplement faire quelque chose comme ceci: 

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

Le motif est le start / chronique-start / row-end / colonne-extrémité. Vous pouvez consulter une démo de cela sur Codepen . Personnellement, je trouve vraiment difficile de se souvenir de ce modèle de lignes et de colonnes, mais la grande chose à propos de Grid est qu'il existe de nombreuses façons de faire la même chose.

Modification de la disposition des éléments de la grille

Dans les jours vieux, si nous décidions à un moment donné de modifier la disposition de nos éléments de page, cela aurait probablement conduit à beaucoup de refactorisation de code. Par exemple, que se passe-t-il si nous voulions étendre l'élément jusqu'à la fin de la disposition? Avec les zones de grille, c'est super facile. Nous pouvons simplement faire ceci: 

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

Nous venons de supprimer une cellule de grille du pied de page et de l'avoir attribué à côté, conduisant à ce que nous voyons dans le stylo ci-dessous.

Voir les bases de la grille CSS
CSS: placer des éléments en utilisant les zones nommées 2 par SitePoint (@SitePoint)
sur Codepen.

Nous pourrions même décider que nous voulons une cellule vide quelque part. Nous le faisons en utilisant simplement une ou plusieurs périodes, comme ainsi: 

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>gap: 10px;
</span><span>}
</span>

Voyez si vous pouvez prédire le résultat de cela, puis consultez cette démo de codepen.

Lire plus approfondie:

  • En savoir plus sur la grille-template-areas.
  • En savoir plus sur la propriété de la région de la grille.

en utilisant des requêtes multimédias avec disposition de la grille

Nous voulons souvent une disposition différente sur les petits écrans - comme empiler nos éléments de grille dans une seule colonne. Un moyen facile de le faire est de réorganiser nos zones de grille via une requête médiatique: 

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>gap: 10px;
</span>  <span>grid-template-columns: 1fr 1fr 1fr 1fr;
</span><span>}
</span>

Nous avons maintenant spécifié une seule colonne et définissons l'ordre des éléments dans cette colonne.

Voir les bases de la grille CSS
CSS: Utilisation des requêtes multimédias par SitePoint (@SitePoint)
sur Codepen.

Appuyez sur le bouton 0,5x en bas du stylo ci-dessus pour voir comment la mise en page réagit (ou affichez le stylo sur codepen et élargissez et étroitez la fenêtre).

Modification de l'ordre d'affichage des éléments de la grille

Nous sommes maintenant à un bon moment pour voir à quel point il est facile de modifier l'ordre d'affichage des éléments dans la mise en page de la grille. Dans l'exemple ci-dessus, notre ordre source est , , et

, mais dans notre requête multimédia, nous avons défini l'élément pour apparaître au-dessus de l'élément . Il est aussi facile d'échanger autour de l'ordre d'affichage des éléments avec une grille! Nous pourrions même inverser complètement l'ordre d'affichage de tous.

Nous pouvons réorganiser les éléments de la grille même s'ils n'utilisent pas d'éléments nommés. Par défaut, les éléments de la grille sont placés en fonction de leur commande de source HTML. Ils ont également une commande par défaut de 0. Nous pouvons utiliser cette propriété d'ordre pour modifier la disposition visuelle des éléments. Plus la valeur de commande est faible, plus tôt un élément apparaît. Même les entiers négatifs peuvent être utilisés, donc si notre élément avait un ordre de -1, il apparaîtrait en premier.

Pour commander nos éléments comme indiqué ci-dessus, nous pourrions définir la valeur de commande de

, et à 1, 2 et 3 respectivement. (Découvrez ce stylo pour une démo en direct.)

un mot de prudence, cependant: les éléments réorganisés peuvent être un cauchemar pour l'accessibilité, avec la mise au point de sauter sur l'écran de manière imprévisible, alors utilisez-la avec parcimonie.

Lire plus approfondie:

  • La spécification officielle de la propriété de commande.
  • La propriété de commande expliquée sur MDN, y compris une section sur les problèmes d'accessibilité.

Disposition de la grille réactive sans requêtes multimédias

Nous avons vu au-dessus que nous pouvons rendre notre mise en page réactive aux différentes tailles d'écran. Premièrement, en définissant les largeurs de colonnes sur des unités flexibles comme FR, la disposition peut se développer et rétrécir au besoin. Deuxièmement, nous pouvons utiliser les requêtes multimédias pour réorganiser la disposition à certains points d'arrêt.

La disposition de la grille a des outils qui permettent la reflux de mise en page sans utiliser les requêtes multimédias. Cependant, nous ne pouvons pas y parvenir avec la mise en page avec laquelle nous avons travaillé ci-dessus. Il ne fonctionne que pour des dispositions plus simples où chaque colonne partage la même largeur.

Considérons le HTML suivant: 

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

Assisons ces divs côte à côte sur les écrans larges et empilements sur de petits écrans: 

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

Vous pouvez voir le résultat dans le stylo ci-dessous.

Voir les bases de la grille CSS
CSS: Grille réactive sans requêtes multimédias par SitePoint (@SitePoint)
sur Codepen.

(encore une fois, appuyez sur le bouton 0,5x en bas du stylo ci-dessus pour voir comment la disposition réagit.)

Ce code est un peu plus avancé, et nous l'expliquons en détail sur la façon d'utiliser la fonction CSS Grid Repeat (). Le but principal de le montrer ici est de donner une idée de ce qui est possible avec la mise en page de la grille.

Lire plus approfondie:

  • En savoir plus sur le mot-clé automatique.
  • En savoir plus sur l'utilisation de la fonction Minmax () avec la fonction min ().

Éléments qui se chevauchent dans une grille

Une fois que nous avons créé une disposition de grille, nous pouvons faire plus que d'allouer chaque élément de grille à sa propre zone de grille séparée. Nous pouvons facilement définir des articles de grille pour partager les mêmes zones de grille, en partie ou en totalité. Cela nous permet de créer de belles mises en page créatives - avec des éléments qui se chevauchent, et sans code délicat.

Créons une grille simple contenant une image et un texte qui couvre en partie l'image. Voici le HTML: 

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

Maintenant, nous allons attribuer certaines lignes et colonnes qui sont partiellement partagées entre la div et l'image: 

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

Le résultat est illustré dans la démo de codepen suivante.

Voir le stylo
CSS Basics de grille: éléments de la grille en couches par SitePoint (@SitePoint)
sur Codepen.

La div apparaît au-dessus de l'image simplement parce qu'elle vient après l'image dans l'ordre source. Nous pouvons modifier quel élément apparaît sur l'autre en appliquant l'index z. Par exemple, essayez de définir un indice z de 2 sur l'image dans le stylo ci-dessus; Il couvrira désormais une partie de la div.

Lire plus approfondie:

  • Pour comprendre le positionnement de l'image dans la démo ci-dessus, consultez comment utiliser CSS Object-Fit et Object Position.
  • En savoir plus sur la propriété Z-Index.

Envelopper

Cet article est destiné à une introduction de base à ce que la disposition de la grille CSS peut faire. L'espoir est qu'il fournira un tremplin pour l'apprentissage et la découverte supplémentaires. Et il y a une énorme une quantité que vous pouvez en apprendre davantage sur la grille.

GRID VS FLEXBOX

Une question éternelle est de savoir si nous devons utiliser Grid ou Flexbox. Il est vrai qu'il y a un certain chevauchement entre ce que ces deux outils de mise en page peuvent faire. Souvent, là où il y a un chevauchement, il vaut la peine de faire quelques tests pour voir qui a la meilleure boîte à outils dans chaque scénario particulier.

En règle générale, cependant, rappelez-vous ceci:

  • Flexbox est principalement conçu pour disposer des éléments dans une seule direction (même si ces éléments se cachent sur les lignes).
  • La grille est conçue pour disposer des éléments dans deux directions, de sorte qu'ils sont alignés à la fois horizontalement et verticalement.

Pour cette raison, la grille est généralement une meilleure option pour les dispositions de pages entières, tandis que Flexbox est meilleur pour disposer des choses comme les menus.

Pour une comparaison plus approfondie de la grille et de la flexion, consultez Flexbox ou CSS Grid? Comment prendre des décisions de mise en page qui ont du sens.

Prise en charge du navigateur pour la grille

Lorsque nous avons publié cet article pour la première fois en 2016 - Grid était assez nouveau dans les navigateurs, et le soutien n'était pas universel. De nos jours, tous les principaux navigateurs prennent en charge la grille. Il y aura encore quelques navigateurs plus âgés flottant qui ne le soutiennent pas, mais dans de nombreux cas, ces navigateurs affichent toujours le contenu assez bien. Une belle approche fourre-tout consiste à commencer par une disposition à une seule colonne pour les appareils mobiles qui peuvent servir de repli pour les navigateurs qui ne prennent pas en charge la disposition de la grille. Les styles de grille peuvent être ajoutés via des requêtes multimédias pour les navigateurs qui les soutiennent - à afficher sur des écrans plus larges.

Vous pouvez consulter la dernière prise en charge du navigateur pour la grille sur caniuse.

Ressources d'apprentissage pour la grille

Enfin, terminons par quelques ressources d'apprentissage supplémentaires. Beaucoup de gens incroyables ont fourni des tutoriels, des vidéos, des livres et plus encore sur la grille. En voici quelques-uns:

  • CSS Master, 3e édition , par Tiffany Brown, est une excellente introduction à CSS, avec des conseils approfondis sur la façon d'utiliser la grille et d'autres méthodes de mise en page.
  • La référence de la grille MDN.
  • La grille par exemple de site de Rachel Andrew. (En fait, Rachel Andrew a beaucoup d'articles, de tutoriels, de vidéos et même d'un livre sur la mise en page de la grille, et en est un expert avant tout. >
    • La série YouTube Landout Land par Jen Simmons. (Jen est un autre nom qui mérite d'être googlé.)
    • Kevin Powell présente de nombreux tutoriels de grille fantastiques sur YouTube qui valent la peine d'être vérifiés.
    • CSS-Tricks fournit un guide complet de la grille CSS, qui est une ressource vraiment pratique.
FAQ sur la disposition de la grille CSS

Qu'est-ce que la disposition de la grille CSS?

La disposition de la grille CSS est un système de disposition dans CSS qui vous permet de créer des dispositions complexes basées sur la grille pour les pages Web. Il fournit un moyen plus flexible et efficace de concevoir et de positionner les éléments dans une grille.

Comment activer la grille CSS sur ma page Web?

Pour activer la grille CSS, vous pouvez utiliser l'affichage: grille; propriété dans votre code CSS. Cela fera du conteneur sélectionné un récipient de grille.

Quels sont les principaux composants de la grille CSS?

Les principaux composants de la grille CSS sont le conteneur de grille et les éléments de la grille. Le conteneur est défini à l'aide de l'affichage: grille; propriété, et les éléments sont les éléments placés à l'intérieur du conteneur.

Comment définir les lignes et les colonnes dans une grille CSS?

Vous pouvez définir des lignes et des colonnes en définissant des propriétés comme la grille -Rows, grille-template-colonnes, ou en utilisant le raccourci de la grille de propriété.

Puis-je avoir différentes largeurs de colonne et hauteurs de ligne dans une grille CSS?

Oui, vous pouvez spécifier différentes Largeurs de colonnes et hauteurs de lignes en utilisant différentes valeurs dans la définition de votre réseau de grille, telles que les longueurs fixes, les pourcentages ou l'unité FR pour le dimensionnement flexible.

Puis-je nicher les grilles dans les grilles?

Oui, vous pouvez nidifier les grilles dans les grilles, créant des dispositions complexes en rendant un élément de grille lui-même un récipient de grille.

Est-ce que CSS est réactive? Puis-je faire en sorte que les grilles s'adaptent à différentes tailles d'écran?

Oui, la grille CSS peut être réactive. Vous pouvez utiliser des requêtes multimédias, des pourcentages ou des unités relatives pour adapter votre disposition de grille à différentes tailles d'écran et appareils.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

css html Object Resource define if for while include try catch auto using Length finally Property number function default this display position viewport transform column table word Other
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：20 façons simples de styliser l'élément de détails HTMLArticle suivant：20 façons simples de styliser l'élément de détails HTML

Articles Liés

Voir plus