Maison >interface Web >tutoriel CSS >Guide des propriétés de disposition du panneau CSS : grille et colonnes de modèle de grille
Guide des propriétés de disposition du panneau CSS : grille et colonnes de modèle de grille
- WBOYoriginal
- 2023-10-27 11:04:53947parcourir
Guide des propriétés de mise en page des panneaux CSS : grille et colonnes de modèle de grille
Introduction :
Dans la conception Web moderne, la mise en œuvre de mises en page complexes est une compétence essentielle. Le développement du CSS a facilité la création de mises en page Web flexibles et composables. Dans cet article, nous nous concentrerons sur la propriété CSS grid et la propriété grid-template-columns, qui sont des outils puissants pour implémenter des dispositions de panneaux.
Qu'est-ce que la disposition en grille ?
La mise en page en grille est un nouveau modèle de mise en page en CSS, qui nous permet de définir et de mettre en page le contenu Web en utilisant une combinaison de lignes et de colonnes. En appliquant l'attribut grid sur le conteneur parent, nous pouvons facilement créer des mises en page Web avec des fonctionnalités flexibles et réactives.
Quelle est la propriété grid-template-columns ?
grid-template-columns est l'un des attributs importants de la disposition en grille, qui est utilisé pour définir les colonnes dans la disposition en grille. En spécifiant la largeur et le nombre de colonnes, nous pouvons créer des dispositions de panneaux avec différents nombres et largeurs de colonnes. La valeur de cette propriété peut être une valeur de pixel fixe, un pourcentage ou d'autres unités.
Exemple de code :
Utilisons un exemple pour montrer comment utiliser l'attribut grid-template-columns pour obtenir une disposition de panneau flexible. Considérez l'exemple de mise en page suivant :
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.panel {
background-color: #ccc;
padding: 10px;
}
.panel:first-child {
grid-column: 1 / span 2;
}
.panel:nth-child(2) {
grid-column: 3;
grid-row: 1 / span 2;
}
</style>
</head>
<body>
<div class="container">
<div class="panel">面板1</div>
<div class="panel">面板2</div>
<div class="panel">面板3</div>
<div class="panel">面板4</div>
<div class="panel">面板5</div>
</div>
</body>
</html>Dans l'exemple ci-dessus, nous avons transformé l'élément .container en un conteneur de grille en définissant l'attribut d'affichage sur grille. Ensuite, nous utilisons la propriété grid-template-columns pour diviser le conteneur en 3 colonnes, chacune d'une largeur de 1fr. 1fr signifie ici une répartition équitable de l'espace disponible.
Ensuite, nous utilisons l'attribut grid-column pour disposer des panneaux spécifiques. Par exemple, le premier panneau s'étend sur les colonnes 1 et 2, tandis que le deuxième panneau occupe la colonne 3 et les nouvelles première et deuxième lignes.
Enfin, nous utilisons l'attribut gap pour ajouter 10 pixels d'espace entre les panneaux afin de rendre la mise en page plus belle et plus claire.
Résumé :
En utilisant les propriétés de grille et de grille-modèle-colonnes, nous pouvons facilement créer des dispositions de panneaux flexibles et réactives. En spécifiant le nombre de colonnes et la largeur, nous pouvons combiner de manière flexible différentes dispositions de grille. J'espère que cet article vous aidera à utiliser la disposition en grille dans la conception Web, rendant votre mise en page plus flexible, plus belle et adaptable aux appareils dotés de différentes tailles d'écran.
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!