Maison > Article > interface Web > Tutoriel HTML : Comment utiliser la disposition en grille pour la mise en page
Tutoriel HTML : Comment utiliser la disposition en grille pour la mise en page
- PHPzoriginal
- 2023-10-21 11:43:491428parcourir
Tutoriel HTML : Comment utiliser la mise en page en grille pour la mise en page
De l'ancienne mise en page de tableau à la mise en page Flex actuelle, CSS s'est développé et a évolué dans la mise en page. Désormais, la mise en page CSS Grid est devenue une méthode de mise en page puissante et flexible. Dans ce didacticiel, nous apprendrons à utiliser la mise en page CSS Grid pour créer des mises en page complexes et esthétiques.
La disposition CSS Grid est un système de grille bidimensionnelle qui nous permet de diviser la page en plusieurs lignes et colonnes, puis de placer le contenu dans ces lignes et colonnes. Bien que la disposition en grille soit encore une fonctionnalité relativement nouvelle, elle est déjà prise en charge par les navigateurs modernes et largement utilisée dans des applications pratiques.
Avant de commencer, nous devons comprendre les termes et concepts de base de la disposition en grille. Une disposition Grid se compose des composants principaux suivants :
- Container (Container) : contient l'élément parent de tous les éléments Grid. Activez la disposition en grille en définissant l'attribut
displayde l'élément surgridouinline-grid. - 行（Row）：Grid布局的水平部分，可以通过设置容器的
grid-template-rows来定义行的大小和数量。 - 列（Column）：Grid布局的垂直部分，可以通过设置容器的
grid-template-columns来定义列的大小和数量。 - Grid项（Grid Item）：被放置在网格中的元素。在容器中直接写入的元素会自动被视为Grid项。
display属性为grid或inline-grid来启用Grid布局。现在让我们动手实践一下，假设我们要创建一个简单的网格布局，其中有一个头部、一个侧边栏和一个主要内容区域。
-
创建HTML结构：
<!DOCTYPE html> <html> <head> <title>Grid布局教程</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <header>头部</header> <aside>侧边栏</aside> <main>主要内容区域</main> </div> </body> </html> -
在CSS中定义Grid布局：
.container { display: grid; grid-template-rows: 100px auto; grid-template-columns: 200px 1fr; grid-gap: 10px; } header { grid-row: 1; grid-column: 1 / span 2; background-color: #f2f2f2; padding: 20px; } aside { grid-row: 2; grid-column: 1; background-color: #e9e9e9; padding: 20px; } main { grid-row: 2; grid-column: 2; background-color: #d9d9d9; padding: 20px; }
在上面的代码中，我们首先在容器中设置了Grid布局，定义了两行和两列。头部元素占据了第一行的两个列，侧边栏和主要内容分别占据了第二行的第一个和第二个列。同时，我们还设置了网格项之间的间距为10像素。
通过这个简单的例子，我们可以看到Grid布局的强大之处。不仅仅是指定行和列的大小和数量，我们还可以通过grid-row和grid-column属性来指定网格项的位置，使布局更加灵活。
除了上面的基本用法外，Grid布局还提供了更多强大的功能，如自适应大小、自动填充空间等。对于想要深入学习和掌握Grid布局的人来说，可以进一步了解一下grid-template-areas、grid-auto-rows、grid-auto-columnsRow : La partie horizontale de la disposition de la grille. Vous pouvez définir la taille et le nombre de lignes en définissant le grid-template-rows du conteneur.
grid-template-columns du conteneur. Grid Item : élément placé dans la grille. Les éléments écrits directement dans le conteneur sont automatiquement traités comme des éléments de grille.
Maintenant, passons à la pratique, en supposant que nous souhaitions créer une disposition de grille simple avec un en-tête, une barre latérale et une zone de contenu principale. 🎜🎜🎜🎜 Créer une structure HTML : 🎜rrreee🎜🎜 Définir la disposition de la grille en CSS : 🎜rrreee🎜Dans le code ci-dessus, nous définissons d'abord la disposition de la grille dans le conteneur, deux lignes et deux colonnes sont définies. L'élément d'en-tête occupe deux colonnes de la première ligne, et la barre latérale et le contenu principal occupent respectivement les première et deuxième colonnes de la deuxième ligne. Dans le même temps, nous définissons également l'espacement entre les éléments de la grille à 10 pixels. 🎜🎜À travers cet exemple simple, nous pouvons voir la puissance de la disposition Grid. En plus de spécifier la taille et le nombre de lignes et de colonnes, nous pouvons également spécifier la position des éléments de la grille via les attributsgrid-row et grid-column pour rendre la mise en page plus souple. 🎜🎜En plus de l'utilisation de base ci-dessus, la disposition en grille fournit également des fonctions plus puissantes, telles que la taille adaptative, le remplissage automatique de l'espace, etc. Pour ceux qui souhaitent apprendre et maîtriser en profondeur la disposition de la grille, vous pouvez en apprendre davantage sur les grid-template-areas, les grid-auto-rows et les grid- colonnes automatiques et autres attributs. 🎜🎜J'espère que grâce à ce tutoriel, vous pourrez avoir une compréhension et une maîtrise préliminaires de la façon d'utiliser la mise en page CSS Grid pour la mise en page. En utilisant la disposition en grille de manière flexible, vous pouvez créer des mises en page de pages Web uniques, belles et réactives. Amusez-vous avec la mise en page CSS ! 🎜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!