l-1

WEB教程

主页/CSS教程/CSS布局技术/CSS Grid容器属性

CSS教程

CSS Grid容器属性

CSS Grid容器属性详解：模板,区域和间距

1. Grid布局简介

CSS Grid布局是一个二维布局系统，可以同时处理行和列，成为现代网页布局的强大工具。与Flexbox的一维布局不同，Grid布局允许开发者在水平和垂直两个维度上对网页元素进行精确控制。

Grid布局由两个核心部分组成：Grid容器和Grid项目。将元素的display属性设置为grid或inline-grid，该元素就成为了一个Grid容器，其直接子元素则自动成为Grid项目。

.container {
  display: grid;
}

2. 网格模板定义

2.1 定义列和行

grid-template-columns和grid-template-rows是Grid布局的核心属性，用于定义网格的列数和行数以及它们的大小。

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}

这段代码创建了一个3×3的网格，每列宽度为100px，每行高度为100px。

2.2 使用fr单位

fr单位表示网格容器中的可用空间的一部分，类似于Flexbox中的flex-grow属性。

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

这段代码创建了三列，中间列的宽度是两侧列宽度的两倍。

2.3 使用repeat()函数

当需要创建多个相同大小的列或行时，可以使用repeat()函数简化代码。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

这段代码创建了三等宽的列，等同于grid-template-columns: 1fr 1fr 1fr;。

2.4 使用minmax()函数

minmax()函数允许设置网格轨道的最小和最大尺寸，使布局更加灵活。

.container {
  display: grid;
  grid-template-columns: 100px minmax(100px, 300px) 100px;
}

这段代码创建了三列，其中中间列的最小宽度为100px，最大宽度为300px。

2.5 自动填充与自动适配

auto-fill和auto-fit关键字允许网格根据容器大小自动调整列数。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 150px);
}

这段代码会创建尽可能多的150px宽的列来填充容器。

3. 网格区域定义

3.1 使用grid-template-areas

grid-template-areas属性通过给网格区域命名来创建视觉模板，使布局代码更直观。

.container {
  display: grid;
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

这段代码定义了一个典型的网页布局，包含页眉、侧边栏、内容区和页脚。

3.2 关联网格区域

定义网格区域后，需要通过grid-area属性将网格项目与命名区域关联起来。

.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.content {
  grid-area: content;
}
.footer {
  grid-area: footer;
}

3.3 创建空白单元格

在grid-template-areas中使用点号(.)可以创建空白单元格。

.container {
  display: grid;
  grid-template-areas: 
    "header header header"
    ". content sidebar"
    "footer footer footer";
}

这段代码在第二行左侧创建了一个空白单元格。

4. 网格间距控制

4.1 行列间距

row-gap和column-gap属性分别控制行与行、列与列之间的间距。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 10px;
  column-gap: 20px;
}

这段代码创建了一个三列网格，行间距为10px，列间距为20px。

4.2 简写gap属性

gap是row-gap和column-gap的简写属性。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 20px;
}

这段代码等同于同时设置row-gap: 10px;和column-gap: 20px;。如果只设置一个值，则表示行间距和列间距相同。

5. 网格流与自动布局

5.1 grid-auto-flow属性

grid-auto-flow属性控制没有明确位置的网格项目如何放置，默认值为row，即按行优先排列。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row;
}

将值改为column可以使项目按列优先排列。

5.2 dense关键字

添加dense关键字可以启用密集填充模式，Grid会自动填充网格中的空白。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row dense;
}

这段代码会让Grid自动填充布局过程中产生的空白区域。

6. 对齐方式设置

6.1 项目对齐

justify-items和align-items属性分别控制所有网格项目在水平方向和垂直方向的对齐方式。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  align-items: center;
}

这段代码使所有网格项目在各自单元格中居中对齐。

6.2 内容对齐

当网格总尺寸小于容器尺寸时，justify-content和align-content属性控制整个网格区域在容器中的对齐方式。

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  justify-content: center;
  align-content: center;
}

这段代码使整个网格区域在容器中居中对齐。

7. 完整示例

下面是一个完整的网页布局示例，展示了Grid容器属性的实际应用：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid布局示例</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: 200px 1fr;
      grid-template-rows: 80px 1fr 60px;
      grid-template-areas: 
        "header header"
        "sidebar content"
        "footer footer";
      gap: 10px;
      height: 100vh;
    }

    .header {
      grid-area: header;
      background-color: #0490db;
      display: flex;
      align-items: center;
      padding-left: 20px;
    }

    .sidebar {
      grid-area: sidebar;
      background-color: #054154;
      padding: 20px;
    }

    .content {
      grid-area: content;
      background-color: #f0f0f0;
      padding: 20px;
    }

    .footer {
      grid-area: footer;
      background-color: #0490db;
      display: flex;
      align-items: center;
      padding-left: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <header class="header">页眉</header>
    <aside class="sidebar">侧边栏</aside>
    <main class="content">主要内容</main>
    <footer class="footer">页脚</footer>
  </div>
</body>
</html>

8. 响应式网格布局

Grid布局可以结合媒体查询创建响应式设计。

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "header"
    "content"
    "sidebar"
    "footer";
  gap: 10px;
}

@media (min-width: 768px) {
  .container {
    grid-template-columns: 200px 1fr;
    grid-template-rows: 80px 1fr 60px;
    grid-template-areas: 
      "header header"
      "sidebar content"
      "footer footer";
  }
}

这段代码在移动设备上使用单列布局，在平板及以上设备上使用两列布局。

知识点总结

知识点知识内容
Grid容器通过设置display: grid或display: inline-grid创建Grid容器，其直接子元素成为Grid项目
网格模板使用grid-template-columns和grid-template-rows定义网格的列和行
fr单位相对单位，表示网格容器中可用空间的一部分，用于创建灵活的比例布局
repeat()函数简化重复模式的列或行定义，提高代码可读性和维护性
minmax()函数定义网格轨道的大小范围，设置最小和最大尺寸限制
grid-template-areas通过命名网格区域创建视觉模板，直观地定义布局结构
gap属性控制行与行、列与列之间的间距，是row-gap和column-gap的简写形式
grid-auto-flow控制没有明确位置的网格项目的自动放置方式，可选row、column或dense
对齐属性justify-items和align-items控制项目在单元格内的对齐方式，justify-content和align-content控制整个网格在容器中的对齐方式

, , ,