• 主页

  • 投资

  • IT

    🔥

  • 设计

  • 销售

  • 人

  • 共240篇

    前端 - HTML5

关闭

返回栏目

关闭

返回前端 - HTML5栏目

196 - 布局技术 - 网格布局 - 网格容器的属性

作者：

贺及楼

成为作者

更新日期：2025-02-27 18:03:08

布局技术 - 网格布局 - 网格容器的属性

在前端开发中，布局是构建页面结构的关键部分。HTML5 引入的网格布局（Grid Layout）为开发者提供了一种强大且灵活的方式来创建复杂的页面布局。本文将详细介绍网格布局中网格容器的属性，通过丰富的实例和清晰的讲解，帮助大家掌握这些重要的属性。

什么是网格布局和网格容器

网格布局是一种二维布局模型，它允许我们将页面划分为行和列的网格，然后将元素放置在这些网格单元格中。网格容器是应用了 display: grid 或 display: inline-grid 属性的元素，它包含了所有的网格项（子元素）。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <style>
  8.    .grid-container {
  9.       display: grid;
  10.       background-color: lightblue;
  11.       padding: 10px;
  12.     }
  14.    .grid-item {
  15.       background-color: rgba(255, 255, 255, 0.8);
  16.       border: 1px solid rgba(0, 0, 0, 0.8);
  17.       padding: 20px;
  18.       font-size: 30px;
  19.       text-align: center;
  20.     }
  21.   </style>
  22. </head>
  24. <body>
  25.   <div class="grid-container">
  26.     <div class="grid-item">1</div>
  27.     <div class="grid-item">2</div>
  28.     <div class="grid-item">3</div>
  29.     <div class="grid-item">4</div>
  30.     <div class="grid-item">5</div>
  31.     <div class="grid-item">6</div>
  32.   </div>
  33. </body>
  35. </html>

在上述代码中，.grid-container 就是网格容器，而 .grid-item 是网格项。目前由于没有设置网格的行和列，所有的网格项会堆叠在一起。

网格容器的重要属性

1. grid-template-columns 和 grid-template-rows

这两个属性用于定义网格的列和行的大小。可以使用长度值（如 px、em）、百分比（%）、分数单位（fr）等来指定大小。

  1. .grid-container {
  2.   display: grid;
  3.   grid-template-columns: 100px 200px 1fr;
  4.   grid-template-rows: 50px 100px;
  5. }

上述代码将网格容器划分为 3 列，第一列宽 100px，第二列宽 200px，第三列占据剩余空间；同时划分为 2 行，第一行高 50px，第二行高 100px。

2. grid-template-areas

该属性用于定义网格区域的名称，方便后续将网格项放置到指定区域。

  1. .grid-container {
  2.   display: grid;
  3.   grid-template-columns: 1fr 1fr 1fr;
  4.   grid-template-rows: auto auto auto;
  5.   grid-template-areas:
  6.     "header header header"
  7.     "sidebar main main"
  8.     "footer footer footer";
  9. }
  11. .header {
  12.   grid-area: header;
  13. }
  15. .sidebar {
  16.   grid-area: sidebar;
  17. }
  19. .main {
  20.   grid-area: main;
  21. }
  23. .footer {
  24.   grid-area: footer;
  25. }
  1. <div class="grid-container">
  2.   <div class="header">Header</div>
  3.   <div class="sidebar">Sidebar</div>
  4.   <div class="main">Main Content</div>
  5.   <div class="footer">Footer</div>
  6. </div>

这里我们定义了四个网格区域：header、sidebar、main 和 footer，并将对应的网格项放置到这些区域。

3. grid-gap（grid-row-gap 和 grid-column-gap 的简写）

用于设置网格项之间的间距。

  1. .grid-container {
  2.   display: grid;
  3.   grid-template-columns: 1fr 1fr;
  4.   grid-template-rows: 1fr 1fr;
  5.   grid-gap: 10px; /* 行和列的间距都为 10px */
  6.   /* 也可以分别设置行和列的间距
  7.   grid-row-gap: 10px;
  8.   grid-column-gap: 20px;
  9.   */
  10. }

4. justify-items 和 align-items

justify-items 用于控制网格项在水平方向上的对齐方式，align-items 用于控制网格项在垂直方向上的对齐方式。

  1. .grid-container {
  2.   display: grid;
  3.   grid-template-columns: 1fr 1fr;
  4.   grid-template-rows: 1fr 1fr;
  5.   justify-items: center; /* 水平居中 */
  6.   align-items: end; /* 垂直底部对齐 */
  7. }

5. place-items

place-items 是 align-items 和 justify-items 的简写形式。

  1. .grid-container {
  2.   display: grid;
  3.   grid-template-columns: 1fr 1fr;
  4.   grid-template-rows: 1fr 1fr;
  5.   place-items: center end; /* 水平居中，垂直底部对齐 */
  6. }

6. justify-content 和 align-content

当网格容器的大小大于所有网格项的总大小时，justify-content 用于控制整个网格在水平方向上的对齐方式，align-content 用于控制整个网格在垂直方向上的对齐方式。

  1. .grid-container {
  2.   display: grid;
  3.   grid-template-columns: 100px 100px;
  4.   grid-template-rows: 100px 100px;
  5.   width: 300px;
  6.   height: 300px;
  7.   justify-content: space-around; /* 水平方向上均匀分布，两端有间距 */
  8.   align-content: center; /* 垂直居中 */
  9. }

7. place-content

place-content 是 align-content 和 justify-content 的简写形式。

  1. .grid-container {
  2.   display: grid;
  3.   grid-template-columns: 100px 100px;
  4.   grid-template-rows: 100px 100px;
  5.   width: 300px;
  6.   height: 300px;
  7.   place-content: center space-around; /* 垂直居中，水平均匀分布，两端有间距 */
  8. }

总结表格

属性 作用 值
grid-template-columns 定义网格的列大小 长度值、百分比、fr 等
grid-template-rows 定义网格的行大小 长度值、百分比、fr 等
grid-template-areas 定义网格区域名称 区域名称字符串
grid-gap 设置网格项间距 长度值
justify-items 控制网格项水平对齐 start、end、center、stretch
align-items 控制网格项垂直对齐 start、end、center、stretch
place-items align-items 和 justify-items 简写 align-items justify-items
justify-content 控制整个网格水平对齐 start、end、center、space-around 等
align-content 控制整个网格垂直对齐 start、end、center、space-around 等
place-content align-content 和 justify-content 简写 align-content justify-content

通过掌握这些网格容器的属性，我们可以轻松创建出各种复杂而灵活的页面布局。希望本文能帮助你更好地理解和应用 HTML5 的网格布局。