CSS Grid布局（Grid Layout） 4

一、 Grid 容器属性 (Properties for the Grid Container)

应用于设置了 display: grid 或 display: inline-grid 的元素。

display
- 作用：定义元素为 Grid 容器。
- 值：
  - grid: 块级 Grid 容器。
  - inline-grid: 行内级 Grid 容器。
grid-template-columns
- 作用：定义网格列的数量和尺寸。
- 值：
  - : 定义每列的尺寸。可以是：
    - : 如 100px, 2em。
    - : 相对于容器宽度的百分比，如 25%。
    - auto: 由内容或 minmax() 函数决定。
    - (即 fr 单位): 弹性系数，代表可用空间的一份。如 1fr, 2fr。
    - minmax(min, max): 定义一个尺寸范围，如 minmax(100px, 1fr) (最小100px，最大占1份可用空间)。
    - fit-content(): 根据内容尺寸调整，但不超过指定值。
  - repeat(, ): 重复定义轨道。如 repeat(3, 1fr) (3列，每列1fr), repeat(auto-fill, minmax(100px, 1fr)) (自动填充尽可能多的列，每列最小100px)。
  - none: (默认值，但通常会显式定义) 没有显式定义的列。
grid-template-rows
- 作用：定义网格行的数量和尺寸。
- 值：同 grid-template-columns。
grid-template-areas
- 作用：通过命名网格区域来定义网格布局。
- 值：
  - 字符串 (Strings): 每个字符串代表一行，字符串中的名字代表单元格所属区域名。用空格分隔名字。
  - . (点): 代表一个空单元格。
  - none: (默认值) 不使用命名区域。
  - 示例：
    css 复制代码
```
      grid-template-areas:
  "header header header"
  "nav main aside"
  "footer footer footer";
    
```
grid-template
- 作用：grid-template-rows, grid-template-columns, 和 grid-template-areas 的简写。
- 值：组合上述三个属性的值，语法较复杂，通常分开写更清晰。
  - none: (默认值)
  - /
  - $? ? ? \]+ \[ / \]? (定义 area 和 row/col)$
- 作用：设置网格线之间的间距（沟槽）。
- 值：
  - : 设置一个值，同时用于行间距和列间距，如 10px。
  - : 分别设置行间距和列间距，如 15px 10px。
row-gap (或 grid-row-gap)
- 作用：单独设置行间距。
- 值：，如 20px。
column-gap (或 grid-column-gap)
- 作用：单独设置列间距。
- 值：，如 10px。
justify-items
- 作用：定义网格项目在其分配的单元格内沿 行轴（水平方向） 的对齐方式。
- 值：
  - start: 对齐到单元格的行起始边缘。
  - end: 对齐到单元格的行结束边缘。
  - center: 在单元格内水平居中。
  - stretch: (默认值) 项目填充单元格的整个宽度（如果项目未设置宽度）。
align-items
- 作用：定义网格项目在其分配的单元格内沿 列轴（垂直方向） 的对齐方式。
- 值：
  - start: 对齐到单元格的列起始边缘。
  - end: 对齐到单元格的列结束边缘。
  - center: 在单元格内垂直居中。
  - stretch: (默认值) 项目填充单元格的整个高度（如果项目未设置高度）。
  - baseline: 基于项目内容的基线对齐。
place-items
- 作用：align-items 和 justify-items 的简写。
- 值：
  - : 如果只提供一个值，justify-items 也使用相同的值。
  - : 分别设置。
justify-content
- 作用：定义 整个网格 在容器内沿 行轴（水平方向） 的对齐方式（当网格总宽度小于容器宽度时）。
- 值：
  - start: 网格向容器的行起始边缘对齐。
  - end: 网格向容器的行结束边缘对齐。
  - center: 网格在容器内水平居中。
  - stretch: 拉伸网格轨道以填满容器宽度（如果轨道尺寸是 auto）。
  - space-around: 网格轨道均匀分布，轨道两侧空间相等。
  - space-between: 网格轨道均匀分布，首尾轨道贴边。
  - space-evenly: 网格轨道和它们与容器边缘之间的空间都均匀分布。
align-content
- 作用：定义 整个网格 在容器内沿 列轴（垂直方向） 的对齐方式（当网格总高度小于容器高度时）。
- 值：同 justify-content（但作用于垂直方向）。
place-content
- 作用：align-content 和 justify-content 的简写。
- 值：
  - : 如果只提供一个值，justify-content 也使用相同的值。
  - : 分别设置。
grid-auto-columns
- 作用：指定隐式创建的网格列的尺寸（当项目放置在显式定义的列之外时）。
- 值： (同 grid-template-columns 的值)。
grid-auto-rows
- 作用：指定隐式创建的网格行的尺寸。
- 值： (同 grid-template-rows 的值)。
grid-auto-flow
- 作用：指定自动布局算法如何放置没有明确放置在网格中的项目。
- 值：
  - row: (默认值) 优先逐行填充。
  - column: 优先逐列填充。
  - dense: 尝试填补网格中较早出现的空隙，可能会打乱项目顺序。
grid
- 作用：一个复杂的简写属性，可以同时设置 grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, grid-auto-flow。因其复杂性，通常不推荐使用，分开写更清晰。

二、 Grid 项目属性 (Properties for the Grid Items)

应用于 Grid 容器的直接子元素。

grid-column-start
- 作用：定义项目在列方向上开始的网格线。
- 值：
  - : 线号 (如 1, 2, -1) 或线名。
  - span : 跨越指定数量的列。
  - auto: 自动放置。
grid-column-end
- 作用：定义项目在列方向上结束的网格线。
- 值：同 grid-column-start。
grid-row-start
- 作用：定义项目在行方向上开始的网格线。
- 值：同 grid-column-start。
grid-row-end
- 作用：定义项目在行方向上结束的网格线。
- 值：同 grid-column-start。
grid-column
- 作用：grid-column-start 和 grid-column-end 的简写。
- 值：
  - / : 如 1 / 3。
  - / span : 如 2 / span 3。
  - span / : 如 span 2 / 5。
  - : 如果只提供一个值，表示开始线，结束线自动推断（通常是下一条线）。
  - span : 如 span 2 (从自动放置位置开始跨越2列)。
grid-row
- 作用：grid-row-start 和 grid-row-end 的简写。
- 值：同 grid-column。
grid-area
- 作用：给项目指定一个名称，使其放置在由 grid-template-areas 定义的同名区域中；或者是 grid-row-start / grid-column-start / grid-row-end / grid-column-end 的简写。
- 值：
  - : 引用 grid-template-areas 中定义的区域名。
  - / / / : 如 2 / 1 / 4 / 3。
  - auto: 自动放置。
justify-self
- 作用：覆盖容器的 justify-items，定义 当前项目 在其单元格内沿 行轴（水平方向） 的对齐方式。
- 值：start, end, center, stretch。
align-self
- 作用：覆盖容器的 align-items，定义 当前项目 在其单元格内沿 列轴（垂直方向） 的对齐方式。
- 值：start, end, center, stretch, baseline。
place-self
- 作用：align-self 和 justify-self 的简写。
- 值：
  - : 如果只提供一个值，justify-self 也使用相同的值。
  - : 分别设置。
order (与 Flexbox 共享)
- 作用：虽然 Grid 主要通过放置属性控制顺序，但 order 仍然可以影响未明确放置的项目的自动布局顺序，或在视觉顺序与 DOM 顺序需要分离时使用。数值越小越靠前。
- 值： (默认为 0)。

案例 1

html 复制代码

    <!-- 11.html -->
<!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>
    <link rel="stylesheet" href="11.css">
</head>
<body>

<h1>Grid 布局示例</h1>

<!-- 示例 1: 基础的 3x2 网格 -->
<h2>示例 1: 基础的 3x2 网格</h2>
<div class="grid-container example1">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
</div>

<!-- 示例 2: 使用 fr 单位的弹性列 -->
<h2>示例 2: 使用 fr 单位的弹性列</h2>
<div class="grid-container example2">
    <div class="grid-item">1 (1fr)</div>
    <div class="grid-item">2 (2fr)</div>
    <div class="grid-item">3 (1fr)</div>
</div>

<!-- 示例 3: 经典的圣杯布局 (Holy Grail Layout) 变体 -->
<h2>示例 3: 经典的圣杯布局变体 (使用命名区域)</h2>
<div class="grid-container example3">
    <header class="grid-item header">页眉 (Header)</header>
    <nav class="grid-item nav">导航 (Nav)</nav>
    <main class="grid-item main">主内容区域 (Main)</main>
    <aside class="grid-item aside">侧边栏 (Aside)</aside>
    <footer class="grid-item footer">页脚 (Footer)</footer>
</div>

<!-- 示例 4: 响应式卡片布局 -->
<h2>示例 4: 响应式卡片布局</h2>
<div class="grid-container example4">
    <div class="grid-item card">卡片 1</div>
    <div class="grid-item card">卡片 2</div>
    <div class="grid-item card">卡片 3</div>
    <div class="grid-item card">卡片 4</div>
    <div class="grid-item card">卡片 5</div>
    <div class="grid-item card">卡片 6</div>
    <div class="grid-item card">卡片 7</div>
    <div class="grid-item card">卡片 8</div>
</div>

<!-- 示例 5: 项目跨越与显式放置 -->
<h2>示例 5: 项目跨越与显式放置</h2>
<div class="grid-container example5">
    <div class="grid-item item-a">A (跨2列)</div>
    <div class="grid-item item-b">B</div>
    <div class="grid-item item-c">C (跨2行)</div>
    <div class="grid-item item-d">D</div>
    <div class="grid-item item-e">E</div>
</div>

<!-- 示例 6: 项目对齐 -->
<h2>示例 6: 项目对齐</h2>
<div class="grid-container example6">
    <div class="grid-item align-start">Start</div>
    <div class="grid-item justify-center">Center (Horiz)</div>
    <div class="grid-item place-end">End (Both)</div>
    <div class="grid-item baseline-align">Base<br>line</div>
</div>

</body>
</html>

css 复制代码

/* 11.css */
body {
  font-family: "Microsoft YaHei", sans-serif;
  margin: 20px;
}

h1, h2 {
  text-align: center;
  margin-bottom: 20px;
}

.grid-container {
  border: 3px solid steelblue;
  background-color: lightgray;
  padding: 10px;
  margin-bottom: 40px; /* 区分示例 */
  display: grid; /* !! 核心：启用 Grid 布局 !! */
}

.grid-item {
  border: 1px dashed #666;
  background-color: lightcoral;
  padding: 20px;
  text-align: center;
  font-size: 1.1em;
  color: white;
}

/* --- 各示例特定样式 --- */

/* 示例 1: 基础的 3x2 网格 */
.example1 {
  /* 定义 3 列，每列 100px */
  grid-template-columns: 100px 100px 100px;
  /* 定义 2 行，每行 50px */
  grid-template-rows: 50px 50px;
  /* 设置行和列的间距 */
  gap: 10px;
  /* 如果容器宽度大于 3*(100px + 10px) - 10px，网格会靠左对齐 */
  justify-content: start; /* 默认就是 start */
}

/* 示例 2: 使用 fr 单位的弹性列 */
.example2 {
  /* 定义 3 列，按 1:2:1 的比例分配可用宽度 */
  grid-template-columns: 1fr 2fr 1fr;
  /* 行高自动 */
  grid-template-rows: auto;
  gap: 15px;
}

/* 示例 3: 经典的圣杯布局变体 (使用命名区域) */
.example3 {
  /* 定义列：第一列固定宽度，第二、三列弹性 */
  grid-template-columns: 150px 1fr 150px;
  /* 定义行：页眉页脚高度自动，中间区域弹性 */
  grid-template-rows: auto 1fr auto;
  /* 定义区域名称 */
  grid-template-areas:
      "header header header"  /* 第一行：页眉跨越所有列 */
      "nav    main   aside"   /* 第二行：导航、主内容、侧边栏 */
      "footer footer footer"; /* 第三行：页脚跨越所有列 */
  gap: 10px;
  min-height: 400px; /* 给容器一个最小高度看效果 */
}
/* 将 HTML 元素分配到对应的区域 */
.example3 .header { grid-area: header; background-color: #16a085; }
.example3 .nav    { grid-area: nav;    background-color: #27ae60; }
.example3 .main   { grid-area: main;   background-color: #2ecc71; }
.example3 .aside  { grid-area: aside;  background-color: #f1c40f; }
.example3 .footer { grid-area: footer; background-color: #e67e22; }

/* 示例 4: 响应式卡片布局 */
.example4 {
  /* 关键：创建尽可能多的列，每列最小宽度180px，最大等分剩余空间 */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}
.example4 .card {
  background-color: #3498db;
  min-height: 100px; /* 卡片最小高度 */
}

/* 示例 5: 项目跨越与显式放置 */
.example5 {
  /* 定义一个 3 列 2 行的基础网格 */
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
}
.example5 .item-a {
  background-color: #8e44ad;
  /* 从第 1 条列线开始，跨越 2 列 (到第 3 条列线) */
  grid-column: 1 / span 2;
  /* 或者 grid-column: 1 / 3; */
  grid-row: 1; /* 放在第 1 行 (默认跨1行) */
}
.example5 .item-c {
  background-color: #c0392b;
  grid-column: 1; /* 放在第 1 列 */
   /* 从第 2 条行线开始，跨越 2 行 (到第 4 条行线) */
  grid-row: 2 / span 2;
  /* 或者 grid-row: 2 / 4; (如果只有2行，会自动适配) */
}
/* B, D, E 会自动填充剩余单元格 */

/* 示例 6: 项目对齐 */
.example6 {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 150px; /* 固定行高以观察垂直对齐 */
  gap: 10px;
  /* 可以设置容器默认对齐方式 */
  /* justify-items: center; */
  /* align-items: center; */
}
.example6 .align-start {
  align-self: start; /* 当前项目在单元格内顶部对齐 */
  background-color: #2980b9;
}
.example6 .justify-center {
  justify-self: center; /* 当前项目在单元格内水平居中 */
  background-color: #d35400;
  width: 60%; /* 设置宽度，否则 stretch 会覆盖 justify-self */
}
.example6 .place-end {
  place-self: end end; /* align-self: end; justify-self: end; 右下角对齐 */
  background-color: #2c3e50;
  width: 50%;
  height: 50%; /* 设置宽高看效果 */
}
.example6 .baseline-align {
  align-self: baseline; /* 基于基线对齐 */
  font-size: 1.5em;
  background-color: #7f8c8d;
}

案例 2

html 复制代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid 博客布局</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: sans-serif;
    }

    .grid-container {
      display: grid;
      grid-template-areas:
        "header header header"
        "sidebar main aside"
        "footer footer footer";
      grid-template-columns: 200px 1fr 200px;
      grid-template-rows: auto 1fr auto;
      min-height: 100vh;
      gap: 10px;
      padding: 10px;
    }

    header {
      grid-area: header;
      background: #4CAF50;
      color: white;
      padding: 20px;
      font-size: 24px;
    }

    nav {
      grid-area: sidebar;
      background: #f4f4f4;
      padding: 20px;
    }

    main {
      grid-area: main;
      background: #fff;
      padding: 20px;
    }

    aside {
      grid-area: aside;
      background: #f9f9f9;
      padding: 20px;
    }

    footer {
      grid-area: footer;
      background: #222;
      color: white;
      text-align: center;
      padding: 10px;
    }

    /* 响应式：小屏幕折叠侧栏 */
    @media (max-width: 768px) {
      .grid-container {
        grid-template-areas:
          "header"
          "main"
          "aside"
          "sidebar"
          "footer";
        grid-template-columns: 1fr;
      }

      nav, aside {
        order: 1;
      }
    }
  </style>
</head>
<body>

  <div class="grid-container">
    <header>我的博客</header>
    <nav>导航<br>首页<br>归档<br>关于我</nav>
    <main>
      <h2>文章标题</h2>
      <p>这是文章的内容段落......</p>
    </main>
    <aside>热门推荐<br>文章1<br>文章2</aside>
    <footer>© 2025 我的博客. 保留所有权利。</footer>
  </div>

</body>
</html>