grid

grid

CSS Grid 网格布局教程 - 阮一峰的网络日志
CSS Grid 是一种强大的二维布局系统，允许开发者以行和列的形式创建复杂的布局。它提供了对页面布局的精细控制，同时保持代码的简洁性。以下是 CSS Grid 的核心概念、基本用法和一些高级技巧。

1. CSS Grid 的基本概念

1.1 Grid 容器

CSS Grid 的布局是基于容器的。要创建一个 Grid 布局，需要将一个元素定义为 Grid 容器：

.container {
  display: grid;
}

或者使用 inline-grid 创建内联 Grid 容器：

.container {
  display: inline-grid;
}

1.2 网格线（Grid Lines）

网格线是 Grid 布局中的分隔线，用于定义行和列。网格线可以是显式的（通过 grid-template-rows 和 grid-template-columns 定义）或隐式的（自动创建）。

1.3 网格轨道（Grid Tracks）

网格轨道是行或列之间的空间。可以通过 grid-template-rows 和 grid-template-columns 定义轨道的大小。

1.4 网格单元（Grid Cells）

网格单元是行和列交叉形成的区域。一个网格单元可以被一个或多个网格项占据。

1.5 网格项（Grid Items）

网格项是 Grid 容器的子元素，可以通过 grid-row 和 grid-column 等属性控制其位置。

2. 基本用法

2.1 定义网格轨道

通过 grid-template-rows 和 grid-template-columns 定义行和列的大小：

.container {
  display: grid;
  grid-template-columns: 100px 200px 150px; /* 定义三列 */
  grid-template-rows: 50px 100px; /* 定义两行 */
}

2.2 使用 fr 单位

fr 单位表示“分数”，用于分配可用空间：

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 按比例分配空间 */
  grid-template-rows: 1fr 1fr;
}

2.3 命名网格线

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

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

2.4 放置网格项

使用 grid-column 和 grid-row 定义网格项的位置：

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

2.5 简写：grid-area

grid-area 是一个简写属性，可以同时定义行和列的起始和结束位置：

.item1 {
  grid-area: 1 / 1 / 3 / 3; /* 行起始 / 列起始 / 行结束 / 列结束 */
}

---

3. 高级用法

3.1 自动布局

使用 auto 和 minmax() 定义动态网格轨道：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

3.2 命名区域

通过 grid-template-areas 定义命名区域，方便布局：

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav content sidebar"
    "footer footer footer";
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto auto auto;
}
.header {
  grid-area: header;
}
.nav {
  grid-area: nav;
}
.content {
  grid-area: content;
}
.sidebar {
  grid-area: sidebar;
}
.footer {
  grid-area: footer;
}

3.3 隐式网格轨道

当网格项超出显式定义的网格范围时，CSS Grid 会自动创建隐式轨道：

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-auto-rows: 50px; /* 定义隐式行的高度 */
}

3.4 对齐和间距

使用 justify-items、align-items、gap 等属性控制对齐和间距：

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 50px);
  justify-items: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  gap: 10px; /* 行和列之间的间距 */
}

---

4. 浏览器支持

CSS Grid 已被所有主流浏览器支持，包括 Chrome、Firefox、Safari 和 Edge。在现代前端开发中，CSS Grid 是创建复杂布局的首选工具之一。

5. 总结

CSS Grid 提供了一种强大且灵活的方式来创建复杂的二维布局。通过定义网格容器、行和列，以及控制网格项的位置和大小，开发者可以轻松实现各种布局需求。CSS Grid 的高级功能（如命名区域、自动布局和隐式轨道）进一步提升了其灵活性和实用性。

容器属性

CSS Grid 布局是现代网页设计中非常强大的工具，它提供了一种二维布局系统，可以轻松地创建复杂的页面布局。以下是 CSS Grid 的一些主要容器属性（应用于 display: grid 或 display: inline-grid 的容器元素）：

1. display

• 值：grid 或 inline-grid
• 作用：将容器定义为网格容器。grid 会创建一个块级网格容器，而 inline-grid 则创建一个内联网格容器。

2. grid-template-columns 和 grid-template-rows

• 作用：定义网格的列和行。
• 值：
  • 固定值：100px、50%、auto
  • 重复函数：repeat(3, 100px)（重复3次，每列宽100px）
  • 灵活单位：1fr（表示剩余空间的等分）
  • 最小最大值：minmax(100px, 1fr)（最小宽度为100px，最大宽度为剩余空间的等分）
  • 自适应单位：auto（根据内容自动调整大小）
• 示例：

  .grid-container {
    display: grid;
    grid-template-columns: 100px 1fr 2fr;
    grid-template-rows: 50px auto 100px;
  }

3. grid-template-areas

• 作用：通过命名区域来定义网格布局，便于更直观地设计复杂的布局。
• 值：字符串数组，定义每个区域的名称。
• 示例：

  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 100px 100px;
    grid-template-areas:
      "header header"
      "sidebar content";
  }
  .header { grid-area: header; }
  .sidebar { grid-area: sidebar; }
  .content { grid-area: content; }

4. grid-auto-columns 和 grid-auto-rows

• 作用：定义自动创建的列和行的大小（当网格项超出显式定义的网格时）。
• 值：与 grid-template-columns 和 grid-template-rows 类似。
• 示例：

  .grid-container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-auto-columns: 50px; /* 自动创建的列宽为50px */
    grid-auto-rows: 30px; /* 自动创建的行高为30px */
  }

5. grid-gap（已废弃）

• 作用：设置网格行和列之间的间隔。
• 替代属性：gap、row-gap 和 column-gap。
• 示例：

  .grid-container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 50px 50px;
    gap: 10px; /* 或 row-gap: 10px; column-gap: 10px; */
  }

6. justify-items 和 align-items

• 作用：控制网格项在单元格内的水平和垂直对齐方式。
• 值：
  • start、end、center、stretch
• 示例：

  .grid-container {
    display: grid;
    grid-template-columns: 100px 100px;
    align-items: center; /* 垂直居中 */
    justify-items: start; /* 水平起始对齐 */
  }

7. place-items

• 作用：简写属性，同时设置 align-items 和 justify-items。
• 示例：

  .grid-container {
    display: grid;
    grid-template-columns: 100px 100px;
    place-items: center; /* 等同于 align-items: center; justify-items: center; */
  }

8. justify-content 和 align-content

• 作用：控制整个网格在容器内的水平和垂直对齐方式（适用于多行或多列网格）。
• 值：
  • start、end、center、stretch、space-between、space-around、space-evenly
• 示例：

  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(2, 50px);
    align-content: space-between; /* 垂直方向间距分布 */
    justify-content: center; /* 水平方向居中 */
  }

9. place-content

• 作用：简写属性，同时设置 align-content 和 justify-content。
• 示例：

  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    place-content: center space-between; /* 等同于 align-content: center; justify-content: space-between; */
  }

10. grid-auto-flow

• 作用：控制网格项在自动放置时的填充顺序。
• 值：
  • row：默认值，网格项优先填充行。
  • column：网格项优先填充列。
  • dense：在自动布局中尝试填充空白单元格，以减少空白区域。
• 示例：

  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-auto-flow: column dense;
  }

总结

CSS Grid 提供了强大的布局能力，通过这些容器属性，可以轻松创建复杂的页面布局。这些属性不仅灵活，还能与媒体查询、响应式设计等现代开发技术无缝结合，非常适合现代网页设计的需求。

网格项目属性

在 CSS Grid 布局中，网格项目属性（Grid Item Properties）用于控制单个网格项（grid item）在网格容器（grid container）中的位置和行为。这些属性可以帮助你精确地放置和调整每个网格项，实现复杂的布局效果。以下是主要的网格项目属性：

1. grid-column 和 grid-row

这两个属性用于定义网格项在网格中的起始和结束位置。

• grid-column：
  • 作用：定义网格项在网格中的列位置。
  • 值：
    • <start-line> / <end-line>：指定网格项从哪一列开始，到哪一列结束。
    • span <number>：指定网格项跨越的列数。
    • auto：自动放置。
  • 示例：

    .item {
      grid-column: 2 / 4; /* 从第2列开始，到第4列结束 */
    }

• grid-row：
  • 作用：定义网格项在网格中的行位置。
  • 值：
    • <start-line> / <end-line>：指定网格项从哪一行开始，到哪一行结束。
    • span <number>：指定网格项跨越的行数。
    • auto：自动放置。
  • 示例：

    .item {
      grid-row: 1 / 3; /* 从第1行开始，到第3行结束 */
    }

---

2. grid-area

grid-area 是一个简写属性，可以同时设置网格项的行和列位置。

• 作用：定义网格项的位置和大小。
• 值：
  • <row-start> / <column-start> / <row-end> / <column-end>
  • 或者直接使用命名区域（如果网格容器中定义了 grid-template-areas）。
• 示例：

  .item {
    grid-area: 1 / 2 / 3 / 4; /* 等同于 grid-row: 1 / 3; grid-column: 2 / 4; */
  }

  如果网格容器中定义了命名区域：

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

---

3. justify-self 和 align-self

这两个属性用于控制单个网格项在其单元格内的水平和垂直对齐方式。

• justify-self：
  • 作用：控制网格项在单元格内的水平对齐方式。
  • 值：start、end、center、stretch。
  • 示例：

    .item {
      justify-self: center; /* 水平居中 */
    }

• align-self：
  • 作用：控制网格项在单元格内的垂直对齐方式。
  • 值：start、end、center、stretch。
  • 示例：

    .item {
      align-self: end; /* 垂直对齐到单元格底部 */
    }

---

4. place-self

place-self 是一个简写属性，同时设置 align-self 和 justify-self。

• 作用：同时控制网格项在单元格内的水平和垂直对齐方式。
• 值：<align-self> / <justify-self>。
• 示例：

  .item {
    place-self: center stretch; /* 垂直居中，水平拉伸 */
  }

---

5. z-index

虽然不是 Grid 布局的专有属性，但 z-index 在 Grid 中也非常重要，用于控制网格项的堆叠顺序。

• 作用：定义网格项的堆叠层级。
• 值：auto 或整数值（数值越大，层级越高）。
• 示例：

  .item {
    z-index: 2; /* 将该网格项置于其他网格项之上 */
  }

---

总结

CSS Grid 提供了丰富的网格项目属性，通过这些属性，你可以精确地控制每个网格项的位置、大小和对齐方式。这些属性与网格容器属性相结合，可以实现非常灵活和复杂的布局设计。