Disposition de grille CSS moderne facile et réactive-tutoriel CSS-php.cn

Maison

interface Web

tutoriel CSS

Disposition de grille CSS moderne facile et réactive

Joseph Gordon-Levitt

Feb 10, 2025 am 10:13 AM

Easy and Responsive Modern CSS Grid Layout

Points de base

La grille CSS est un puissant système de disposition qui permet la création de structures de grille dans CSS, pas dans HTML. La plupart des navigateurs modernes le soutiennent, à l'exception de IE11, qui prend en charge les versions plus anciennes.
Cet article montre comment créer une disposition réactive de la grille CSS moderne, ajouter progressivement la grille CSS et fournir du code de secours pour les navigateurs plus âgés. Cela comprend la technologie pour centrer des éléments, courir des projets et ajuster la disposition des petits équipements.
La grille CSS fournit des utilitaires tels que grid-column et grid-row pour localiser les éléments de la grille, ainsi que des propriétés telles que justify-items, align-items et align-self pour aligner et ajuster les éléments. Il permet également des grilles imbriquées, où les éléments enfants de la grille eux-mêmes peuvent être des conteneurs de grille.
Pour les petits appareils d'écran, vous pouvez facilement modifier la structure de disposition pour le linéariser avec la grille CSS, redéfinir la zone de la grille et utiliser les requêtes multimédias. Cela constitue une disposition plus pratique sur les écrans plus petits.

Cet article montrera comment créer une disposition réactive de la grille CSS moderne, montrera comment utiliser le code de secours pour les navigateurs plus anciens, comment ajouter une grille CSS étape par étape et comment reconstruire la disposition sur de petits appareils et utiliser le centr sirection d'alignement d'alignement Éléments.

Dans les articles précédents, nous avons exploré quatre techniques différentes pour construire facilement les dispositions de grille réactives. Ce message a été écrit en 2014 - avant que la grille CSS ne soit disponible - donc dans ce tutoriel, nous utiliserons une structure HTML similaire mais avec une disposition de grille CSS moderne.

Dans ce tutoriel, nous utiliserons Float pour créer une démo avec une disposition de base, puis l'améliorer avec la grille CSS. Nous démontrerons de nombreux services publics utiles tels que les éléments centrés, couvrant des projets et changeant de disposition facilement sur de petits appareils en redéfinissant les zones de grille et en utilisant des requêtes multimédias. Vous pouvez trouver le code dans ce codePen: Codepen Link

Disposition de grille CSS moderne réactive

Avant de plonger dans la création d'une démonstration de grille réactive, introduisons d'abord la grille CSS.

CSS Grid est un puissant système bidimensionnel qui a été ajouté à la plupart des navigateurs modernes en 2017. Il change complètement la façon dont nous créons des dispositions HTML. La disposition de la grille nous permet de créer des structures de grille dans CSS, pas dans HTML.

En plus de IE11, la plupart des navigateurs modernes prennent en charge la grille CSS. Vous pouvez utiliser caniuse.com pour vérifier l'assistance.

La disposition de la grille a un conteneur parent dont la propriété display est définie sur grid ou inline-grid. Les éléments enfants du conteneur sont des articles de grille et ils sont implicitement situés en raison de l'algorithme de la grille puissant. Vous pouvez également appliquer différentes classes pour contrôler le placement, la taille, la position et d'autres aspects du projet.

Commençons par une page HTML de base. Créez un fichier html et ajoutez ce qui suit:

<!DOCTYPE html>
<html>
<head>
  <title>CSS Grid Layout Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h2 id="CSS-Grid-Layout-Example">CSS Grid Layout Example</h2>
  </header>
  <aside class="sidebar">
    <p>Sidebar</p>
  </aside>
  <main>
    <article>1</article>
    <article>2</article>
    <article>11</article>
  </main>
  <footer>
    <p>Copyright 2018</p>
  </footer>
</body>
</html>

Nous utilisons la sémantique HTML pour définir les parties du titre, de la barre latérale, du corps et du pied de page d'une page. Dans la section principale, nous utilisons la balise <article></article> pour ajouter un ensemble d'éléments. <article></article> est une balise sémantique HTML5 qui peut être utilisée pour envelopper un contenu indépendant et autonome. Une seule page peut contenir n'importe quel nombre de balises <article></article>.

Il s'agit d'une capture d'écran de la page à ce stade:

Easy and Responsive Modern CSS Grid Layout

Ensuite, ajoutons le style CSS de base. Ajoutez une balise <style></style> à la tête du document et ajoutez le style suivant:

body {
  background: #12458c;
  margin: 0rem;
  padding: 0px;
  font-family: -apple-system, BlinkMacSystemFont,
            "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
            "Fira Sans", "Droid Sans", "Helvetica Neue",
            sans-serif;
}

header {
  text-transform: uppercase;
  padding-top: 1px;
  padding-bottom: 1px;
  color: #fff;
  border-style: solid;
  border-width: 2px;
}

aside {
  color: #fff;
  border-width:2px;
  border-style: solid;
  float: left;
  width: 6.3rem;
}

footer {
  color: #fff;
  border-width:2px;
  border-style: solid;
  clear: both;
}

main {
  float: right;
  width: calc(100% - 7.2rem);
  padding: 5px;
  background: hsl(240, 100%, 50%);
}

main > article {
  background: hsl(240, 100%, 50%);
  background-image: url('https://source.unsplash.com/daily');
  color: hsl(240, 0%, 100%);
  border-width: 5px;
}

Il s'agit d'une petite page de démonstration, nous allons donc styliser les balises directement pour la lisibilité plutôt que d'appliquer le système de dénomination de classe.

Nous utilisons le flotteur pour positionner la barre latérale vers la gauche, positionnez le corps principal vers la droite et définissez la largeur de la barre latérale sur une largeur fixe 6.3rem . Ensuite, nous calculons et définissons la largeur restante de la partie du corps à l'aide de la fonction CSS calc(). La partie principale contient une bibliothèque de projets organisés en blocs verticaux.

Easy and Responsive Modern CSS Grid Layout

La disposition n'est pas parfaite. Par exemple, la hauteur de la barre latérale est différente de la hauteur de la partie de contenu principale. Il existe différentes techniques CSS qui peuvent résoudre ces problèmes, mais la plupart sont des conseils ou des solutions de contournement. Étant donné que cette mise en page est un secours pour la grille, il sera vu par des utilisateurs de moins en moins. Le repli est disponible et assez bon.

Les dernières versions de Chrome, Firefox, Edge, Opera et Safari prennent tous en charge la grille CSS, ce qui signifie que si vos visiteurs utilisent ces navigateurs, vous n'avez pas à vous soucier de fournir des replies. Vous devez également considérer le navigateur à feuilles persistantes. Les dernières versions de Chrome, Firefox, Edge et Safari sont des navigateurs à feuilles persistantes. Autrement dit, ils se mettront automatiquement et silencieusement à se mettre à jour sans inciter l'utilisateur. Pour vous assurer que votre mise en page fonctionne correctement dans chaque navigateur, vous pouvez commencer par un secours par défaut flottant, puis appliquer les dispositions de grille modernes en utilisant des techniques d'amélioration progressive. Les utilisateurs utilisant des navigateurs plus anciens n'obtiennent pas la même expérience, mais c'est assez bien.

Amélioration progressive: vous n'avez pas à tout couvrir

Lors de l'ajout d'une disposition de grille CSS sur une disposition de secours, vous n'avez pas vraiment à écraser toutes les balises ou à utiliser un style CSS complètement séparé:

Dans les navigateurs qui ne prennent pas en charge la grille CSS, les propriétés de la grille que vous ajoutez seront simplement ignorées.
Si vous utilisez des éléments Float pour disposer, n'oubliez pas que les éléments de la grille sont prioritaires sur Float. Autrement dit, si vous ajoutez un style float: left|right à un élément qui est également un élément de grille (enfant de l'élément parent avec un style display: grid), le flotteur sera ignoré et la grille est prise.
Les règles @supports peuvent être utilisées pour vérifier la prise en charge des fonctionnalités spécifiques dans CSS. Cela nous permet de remplacer le style de secours si nécessaire, tandis que les navigateurs plus anciens ignorent le bloc @supports.

Maintenant, ajoutons la grille CSS à notre page. Tout d'abord, marquons comme un récipient de grille et définissons les colonnes, les lignes et les régions de la grille:

<!DOCTYPE html>
<html>
<head>
  <title>CSS Grid Layout Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h2 id="CSS-Grid-Layout-Example">CSS Grid Layout Example</h2>
  </header>
  <aside class="sidebar">
    <p>Sidebar</p>
  </aside>
  <main>
    <article>1</article>
    <article>2</article>
    <article>11</article>
  </main>
  <footer>
    <p>Copyright 2018</p>
  </footer>
</body>
</html>

Nous utilisons la propriété display:grid pour marquer comme conteneur de grille. Nous avons fixé un écart de grille de 0,1 VW. GAP vous permet de créer des créneaux entre les cellules de la grille au lieu d'utiliser des marges. Nous ajoutons également deux colonnes en utilisant grid-template-columns. La première colonne adopte une largeur fixe de 6,5 REM, et la deuxième colonne adopte une largeur résiduelle. fr est une unité fractionnée, et 1FR est égal à une partie de l'espace disponible.

Ensuite, nous utilisons grid-template-rows pour ajouter trois lignes. La première ligne utilise une hauteur fixe de 6REM, la troisième ligne utilise une hauteur fixe de 3REM et l'espace libre restant (1FR) est alloué à la deuxième ligne.

Nous utilisons ensuite grid-template-areas pour affecter les cellules virtuelles générées par l'intersection des colonnes et des lignes à la région. Nous devons maintenant utiliser grid-area pour définir réellement les zones spécifiées dans le modèle de zone:

body {
  background: #12458c;
  margin: 0rem;
  padding: 0px;
  font-family: -apple-system, BlinkMacSystemFont,
            "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
            "Fira Sans", "Droid Sans", "Helvetica Neue",
            sans-serif;
}

header {
  text-transform: uppercase;
  padding-top: 1px;
  padding-bottom: 1px;
  color: #fff;
  border-style: solid;
  border-width: 2px;
}

aside {
  color: #fff;
  border-width:2px;
  border-style: solid;
  float: left;
  width: 6.3rem;
}

footer {
  color: #fff;
  border-width:2px;
  border-style: solid;
  clear: both;
}

main {
  float: right;
  width: calc(100% - 7.2rem);
  padding: 5px;
  background: hsl(240, 100%, 50%);
}

main > article {
  background: hsl(240, 100%, 50%);
  background-image: url('https://source.unsplash.com/daily');
  color: hsl(240, 0%, 100%);
  border-width: 5px;
}

La plupart des codes de secours n'ont pas d'effets secondaires sur la grille CSS, à l'exception de la largeur de la partie du corps width: calc(100% - 7.2rem);, qui calcule la largeur restante de la partie du corps après avoir soustrait la largeur de la barre latérale plus n'importe quel espace de marge / remplissage.

Il s'agit d'une capture d'écran du résultat. Veuillez noter que la zone principale n'occupe pas toute largeur restante:

Easy and Responsive Modern CSS Grid Layout

Pour résoudre ce problème, nous pouvons ajouter width: auto; lors de la prise en charge de la grille:

body {
  /*...*/
  display: grid;
  grid-gap: 0.1vw;
  grid-template-columns: 6.5rem 1fr;
  grid-template-rows: 6rem 1fr 3rem;
  grid-template-areas: "header   header"
                       "sidebar content"
                       "footer footer";  
}

Il s'agit d'une capture d'écran du résultat actuel:

Easy and Responsive Modern CSS Grid Layout

Ajouter des maillages imbriqués

L'élément enfant de la grille lui-même peut être un récipient de grille. Définissons la partie principale en tant que conteneur de grille:

<!DOCTYPE html>
<html>
<head>
  <title>CSS Grid Layout Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h2 id="CSS-Grid-Layout-Example">CSS Grid Layout Example</h2>
  </header>
  <aside class="sidebar">
    <p>Sidebar</p>
  </aside>
  <main>
    <article>1</article>
    <article>2</article>
    <article>11</article>
  </main>
  <footer>
    <p>Copyright 2018</p>
  </footer>
</body>
</html>

Nous utilisons un espace de grille de 0,1 VW et utilisons la fonction repeat(auto-fill, minmax(12rem, 1fr)); pour définir les colonnes et les lignes. L'option auto-fill essaie de remplir l'espace libre avec autant de colonnes ou de lignes que possible, et crée une colonne ou une ligne implicite si nécessaire. Si vous souhaitez mettre des colonnes ou des lignes disponibles dans l'espace disponible, vous devez utiliser auto-fit. Lisez une bonne explication sur la différence entre auto-fill et auto-fit.

Il s'agit d'une capture d'écran du résultat:

Easy and Responsive Modern CSS Grid Layout

Utilisez la grille grid-column, grid-row et span Mots-clés

CSS Grid fournit grid-column et grid-row, qui vous permettent de localiser les éléments de la grille dans la grille parent à l'aide de lignes de grille. Ils sont l'abréviation des propriétés suivantes:

grid-row-start: Spécifiez la position de départ de l'élément de grille dans la ligne de grille
grid-row-end: Spécifiez la position finale de l'élément de grille dans la ligne de grille
grid-column-start: Spécifiez la position de départ de l'élément de grille dans la colonne de la grille
grid-column-end: Spécifiez la position finale de l'élément de grille dans la colonne de la grille

Vous pouvez également utiliser le mot-clé span pour spécifier le nombre de colonnes ou de lignes à s'étendre.

Faisons le deuxième élément enfant de la zone principale couvrent quatre colonnes et deux lignes et positionnons-la à partir de la deuxième colonne et de la première ligne (qui est également sa position par défaut):

body {
  background: #12458c;
  margin: 0rem;
  padding: 0px;
  font-family: -apple-system, BlinkMacSystemFont,
            "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
            "Fira Sans", "Droid Sans", "Helvetica Neue",
            sans-serif;
}

header {
  text-transform: uppercase;
  padding-top: 1px;
  padding-bottom: 1px;
  color: #fff;
  border-style: solid;
  border-width: 2px;
}

aside {
  color: #fff;
  border-width:2px;
  border-style: solid;
  float: left;
  width: 6.3rem;
}

footer {
  color: #fff;
  border-width:2px;
  border-style: solid;
  clear: both;
}

main {
  float: right;
  width: calc(100% - 7.2rem);
  padding: 5px;
  background: hsl(240, 100%, 50%);
}

main > article {
  background: hsl(240, 100%, 50%);
  background-image: url('https://source.unsplash.com/daily');
  color: hsl(240, 0%, 100%);
  border-width: 5px;
}

Il s'agit d'une capture d'écran du résultat:

Easy and Responsive Modern CSS Grid Layout

en utilisant l'utilitaire d'alignement de la grille

Nous voulons centrer le texte dans le titre, la barre latérale et le pied de page, et les nombres de l'élément <article></article>.

La grille CSS fournit six propriétés justify-items, align-items, justify-content, align-content, justify-self, align-self,

, et

qui peuvent être utilisées pour aligner et ajuster les éléments de la grille . Ils font en fait partie du module d'alignement CSS Box. header aside Ajoutez ce qui suit dans les sélecteurs article, footer,

body {
  /*...*/
  display: grid;
  grid-gap: 0.1vw;
  grid-template-columns: 6.5rem 1fr;
  grid-template-rows: 6rem 1fr 3rem;
  grid-template-areas: "header   header"
                       "sidebar content"
                       "footer footer";  
}

justify-items
Utilisé pour ajuster les éléments de la grille le long de l'axe de ligne ou de la direction horizontale. align-items start end Alignez les éléments de la grille le long de l'axe de la colonne ou de la direction verticale. Ils peuvent tous prendre des valeurs center, stretch,

Il s'agit d'une capture d'écran après l'élément centré: Easy and Responsive Modern CSS Grid Layout

reconstruire la disposition de la grille dans de petits appareils

Notre disposition de démonstration est pratique pour les écrans moyens et grands, mais peut ne pas être le meilleur moyen de créer une page pour les petits appareils d'écran. Avec la grille CSS, nous pouvons facilement modifier cette structure de disposition pour la linéariser dans de petits appareils, en redéfinissant la zone de la grille et en utilisant des requêtes multimédias.

Voici une capture d'écran avant d'ajouter le code pour reconstruire la disposition sur un petit appareil:

Easy and Responsive Modern CSS Grid Layout

Maintenant, ajoutez le code CSS suivant:

<!DOCTYPE html>
<html>
<head>
  <title>CSS Grid Layout Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h2 id="CSS-Grid-Layout-Example">CSS Grid Layout Example</h2>
  </header>
  <aside class="sidebar">
    <p>Sidebar</p>
  </aside>
  <main>
    <article>1</article>
    <article>2</article>
    <article>11</article>
  </main>
  <footer>
    <p>Copyright 2018</p>
  </footer>
</body>
</html>

Sur les appareils avec des largeurs inférieurs à 575 pixels, la disposition devient linéaire:

Easy and Responsive Modern CSS Grid Layout

Notez que la largeur de la barre latérale ne remplit pas la largeur disponible. Ceci est causé par le code de secours, donc tout ce que nous devons faire est d'utiliser width: auto; remplacer width: 6.3rem; sur les navigateurs compatibles avec la grille

body {
  background: #12458c;
  margin: 0rem;
  padding: 0px;
  font-family: -apple-system, BlinkMacSystemFont,
            "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
            "Fira Sans", "Droid Sans", "Helvetica Neue",
            sans-serif;
}

header {
  text-transform: uppercase;
  padding-top: 1px;
  padding-bottom: 1px;
  color: #fff;
  border-style: solid;
  border-width: 2px;
}

aside {
  color: #fff;
  border-width:2px;
  border-style: solid;
  float: left;
  width: 6.3rem;
}

footer {
  color: #fff;
  border-width:2px;
  border-style: solid;
  clear: both;
}

main {
  float: right;
  width: calc(100% - 7.2rem);
  padding: 5px;
  background: hsl(240, 100%, 50%);
}

main > article {
  background: hsl(240, 100%, 50%);
  background-image: url('https://source.unsplash.com/daily');
  color: hsl(240, 0%, 100%);
  border-width: 5px;
}

Il s'agit d'une capture d'écran du résultat final:

Easy and Responsive Modern CSS Grid Layout

Vous pouvez trouver le code final dans le codepen affiché au début de cet article, ou accéder directement à Codepen:

Codepen Link

Conclusion

Dans ce tutoriel, nous avons créé une disposition de démonstration réactive à l'aide de la grille CSS. Nous démontrons l'utilisation du code de secours pour les navigateurs plus âgés, étape par étape en ajoutant la grille CSS, en reconstruisant la disposition dans de petits appareils et en utilisant des éléments de centrage d'attribut d'alignement.

FAQ sur les dispositions de grille CSS modernes faciles et réactives

Quelle est la différence entre la grille CSS et Flexbox?

CSS Grid et Flexbox sont tous deux de puissants systèmes de disposition dans CSS. Bien qu'ils puissent être utilisés de manière interchangeable dans certains cas, ils ont chacun leurs propres avantages uniques. Flexbox est un modèle de mise en page unidimensionnel qui convient particulièrement pour attribuer des éléments le long des colonnes ou des lignes. La grille CSS, en revanche, est un système de disposition bidimensionnel qui est idéal pour organiser des éléments en lignes et colonnes en même temps. Il est parfait pour créer des dispositions Web complexes.

Comment rendre ma disposition de grille CSS réactive?

La grille CSS facilite la création de dispositions réactives sans requêtes multimédias. Vous pouvez utiliser des unités

, qui représentent une partie de l'espace disponible dans le conteneur de la grille. Par exemple, si vous voulez trois colonnes de Monospace, vous pouvez utiliser fr. La colonne redimensionnera automatiquement pour s'adapter à l'écran. grid-template-columns: 1fr 1fr 1fr

Puis-je utiliser CSS Grid et Flexbox ensemble?

Oui, la grille CSS et Flexbox peuvent être utilisées ensemble pour les dispositions. Vous pouvez utiliser la grille CSS pour créer une disposition globale de page, puis utiliser Flexbox pour disposer des composants ou des pièces individuels dans une cellule de grille. Cette combinaison permet un degré élevé de flexibilité et de contrôle sur la disposition.

Comment aligner les éléments dans la grille CSS?

La grille CSS fournit plusieurs propriétés pour aligner les éléments, y compris justify-items, align-items, justify-self et align-self. Ces propriétés peuvent être utilisées pour aligner les éléments le long de l'axe des lignes (alignement) ou de l'axe de colonne (align). Par exemple, justify-items: center va centrer l'élément le long de l'axe de ligne.

Comment créer des lacunes entre les projets de grille?

Vous pouvez utiliser la propriété grid-gap pour créer des lacunes entre les éléments de la grille. Cette propriété est l'abréviation de grid-row-gap et grid-column-gap. Par exemple, grid-gap: 20px créera un espace 20px entre tous les éléments de la grille.

Comment les mots clés

`auto-fill` et `auto-fit` fonctionnent-ils dans la grille CSS?

Les mots clés

auto-fill et auto-fit sont utilisés avec les fonctions grid-template-columns dans les propriétés grid-template-rows et repeat(). auto-fill Utilisez autant d'éléments que possible pour remplir des lignes ou des colonnes, et créez des cellules vides en cas d'éléments insuffisants. auto-fit se comporte de la même manière, mais il effondre les cellules vides, ce qui fait que l'élément s'étire pour remplir la ligne ou la colonne.

Comment chevaucher les éléments dans la grille CSS?

Dans la grille CSS, vous pouvez chevaucher des éléments en plaçant des éléments sur la même cellule de grille ou en les faisant couler plusieurs cellules. Vous pouvez utiliser l'attribut z-index pour contrôler l'ordre d'empilement des éléments qui se chevauchent.

Puis-je utiliser la grille CSS dans tous mes navigateurs?

La grille CSS est soutenue par tous les navigateurs modernes tels que Chrome, Firefox, Safari et Edge. Cependant, Internet Explorer ne le prend pas en charge. Si vous devez prendre en charge Internet Explorer, vous devrez peut-être utiliser une disposition de secours.

Comment créer des grilles imbriquées dans la grille CSS?

Vous pouvez créer des maillages imbriqués en définissant l'élément de maillage lui-même en tant que conteneur de maillage. Appliquez simplement display: grid à votre projet de grille et définissez la disposition de la grille comme vous le feriez pour n'importe quel conteneur de grille.

Comment contrôler la taille des pistes de grille dans la grille CSS?

Vous pouvez utiliser les propriétés grid-template-rows et grid-template-columns pour contrôler la taille de la piste de la grille (lignes et colonnes). Vous pouvez spécifier des tailles à l'aide de diverses unités, telles que des pixels (PX), des pourcentages (%) ou des fractions (FR).

Veuillez noter que le contenu ci-dessus a considérablement réécrit et poli le texte original, s'efforçant de rendre l'article plus lisse, plus facile à lire, et plus conforme au style d'écriture des articles en ligne modernes sans changer la signification originale. Le format d'image reste le même. Le lien Codepen n'est pas disponible en raison de l'incapacité d'accéder aux sites Web et aux fichiers externes. Veuillez le remplacer vous-même.

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!

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