Points de base
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. 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>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> pour ajouter un ensemble d'éléments. <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>.
Il s'agit d'une capture d'écran de la page à ce stade:
Ensuite, ajoutons le style CSS de base. Ajoutez une balise <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.
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é:
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. @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 <body> 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>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 <body> 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:
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:
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>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:
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:
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>.
La grille CSS fournit six propriétés justify-items, align-items, justify-content, align-content, justify-self, align-self,
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
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é: 
<🎜> 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:
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>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:
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;
}
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?Comment rendre ma disposition de grille CSS réactive?
, 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
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.
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.
auto-fill et auto-fit fonctionnent-ils dans la grille CSS? 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.
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.
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.
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.
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!
Quels sont les cinq types de fonctions d'agrégation ?
touches de raccourci de remplacement wps
Erreur de connexion au serveur d'identifiant Apple
Comment résoudre l'écran bleu 0x0000006b
Comment vendre des pièces LUNA
Méthodes courantes de détection des vulnérabilités des sites Web
Résumé du plug-in du navigateur Firefox
Comment installer WordPress après l'avoir téléchargé
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
