Grid布局

Grid布局

CSS Grid 布局是一种强大的二维布局系统，可以轻松实现复杂的网页布局。与传统的布局方式（如浮动、定位、Flexbox）相比，Grid 布局更加灵活和直观，适用于创建行列结构的布局。

Grid 布局的核心概念

1. 容器（Grid Container）：

   • 通过将元素的 display 属性设置为 grid 或 inline-grid，使其成为 Grid 容器。
   • 容器内的直接子元素会自动成为 Grid 项目（Grid Items）。

2. 网格线（Grid Lines）：

   • 网格线是水平和垂直的分隔线，用于定义网格的行和列。
   • 网格线可以通过索引（从1开始）或自定义名称来引用。

3. 轨道（Grid Track）：

   • 轨道是相邻两条网格线之间的空间，分为行轨道和列轨道。

4. 单元格（Grid Cell）：

   • 单元格是行和列的交叉区域，是 Grid 布局的最小单位。

5. 区域（Grid Area）：

   • 区域是由一个或多个单元格组成的矩形区域，可以通过命名或网格线来定义。

Grid 布局的基本用法

1. 定义 Grid 容器

.container {
  display: grid;
  grid-template-columns: 100px 200px auto; /* 定义 3 列 */
  grid-template-rows: 100px 200px; /* 定义 2 行 */
  gap: 10px; /* 设置行和列之间的间距 */
}

• grid-template-columns：定义列的宽度。
• grid-template-rows：定义行的高度。
• gap：设置行和列之间的间距（可以是 row-gap 和 column-gap 的简写）。

2. 定义 Grid 项目

Grid 容器内的直接子元素会自动成为 Grid 项目。可以通过以下属性控制项目的位置和大小：

.item {
  grid-column-start: 1; /* 项目从第 1 列开始 */
  grid-column-end: 3; /* 项目跨越到第 3 列 */
  grid-row-start: 1; /* 项目从第 1 行开始 */
  grid-row-end: 2; /* 项目跨越到第 2 行 */
}

• grid-column 和 grid-row 是简写形式：

  .item {
    grid-column: 1 / 3; /* 从第 1 列到第 3 列 */
    grid-row: 1 / 2; /* 从第 1 行到第 2 行 */
  }
  

3. 命名网格线

可以为网格线命名，方便引用：

.container {
  display: grid;
  grid-template-columns: [start] 100px [middle] 200px [end];
  grid-template-rows: [row-start] 100px [row-end];
}

4. 命名网格区域

通过 grid-template-areas 定义区域，并将项目分配到指定区域：

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 150px 1fr;
  grid-template-rows: 50px 1fr 50px;
}

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

Grid 布局的常用属性

1. 容器属性

• grid-template-columns：定义列的大小。
• grid-template-rows：定义行的大小。
• grid-template-areas：定义网格区域。
• gap：设置行和列之间的间距。
• justify-items：设置所有项目在单元格内的水平对齐方式。
• align-items：设置所有项目在单元格内的垂直对齐方式。
• justify-content：设置整个网格在容器内的水平对齐方式。
• align-content：设置整个网格在容器内的垂直对齐方式。

2. 项目属性

• grid-column：设置项目在列方向上的位置。
• grid-row：设置项目在行方向上的位置。
• grid-area：设置项目所在的区域。
• justify-self：设置单个项目在单元格内的水平对齐方式。
• align-self：设置单个项目在单元格内的垂直对齐方式。

Grid 布局的示例

1. 简单的网格布局

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 列，等宽 */
  grid-template-rows: 100px 100px; /* 2 行，固定高度 */
  gap: 10px;
}

.item {
  background: lightblue;
  border: 1px solid #ccc;
}

2. 复杂的网格布局

<div class="container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="main">Main Content</div>
  <div class="footer">Footer</div>
</div>

.container {
  display: grid;
  grid-template-columns: 150px 1fr;
  grid-template-rows: 50px 1fr 50px;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 10px;
  height: 100vh;
}

.header { grid-area: header; background: lightcoral; }
.sidebar { grid-area: sidebar; background: lightblue; }
.main { grid-area: main; background: lightgreen; }
.footer { grid-area: footer; background: lightyellow; }

Grid 布局的优势

1. 二维布局：同时控制行和列，适合复杂布局。
2. 灵活性：支持响应式设计，可以轻松调整布局。
3. 代码简洁：减少对浮动、定位等传统布局方式的依赖。
4. 对齐功能强大：内置对齐属性，轻松实现水平和垂直居中。

总结

CSS Grid 布局是现代网页设计的强大工具，适合构建复杂的二维布局。通过定义容器和项目属性，可以轻松实现灵活的网页结构。结合 Flexbox 使用，可以满足绝大多数布局需求。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github