【每天一个小笔记】06 Vue项目的Grid布局

原创已于 2025-11-03 22:59:15 修改 · 835 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#笔记 #vue.js #javascript

于 2025-11-03 22:57:58 首次发布

VUE 专栏收录该内容

6 篇文章

订阅专栏

Grid布局基础概念

Grid布局（CSS Grid Layout）是CSS中用于创建二维布局系统的模块，允许通过行和列的组合精确控制元素位置。与Flexbox（一维布局）不同，Grid擅长处理复杂的整体页面结构。

grid 容器属性

display: grid; 将元素设为网格容器，子元素成为网格项。

display: inline-grid; 创建行内网格容器。

grid-template-columns 定义列数和列宽。例如 grid-template-columns: 100px 1fr 2fr; 创建三列，第一列固定 100px，剩余空间按 1:2 分配。

grid-template-rows 定义行数和行高。例如 grid-template-rows: auto 200px; 第一行高度自适应，第二行固定 200px。

grid-template-areas 通过命名区域布局。需搭配子项的 grid-area 使用

grid-template 简写形式，合并 grid-template-rows/columns/areas

gap 设置行列间距，row-gap 和 column-gap 可单独控制。例如 gap: 10px 20px; 行间距 10px，列间距 20px。

justify-items 控制网格项在单元格内的水平对齐（start/end/center/stretch）。

align-items 控制网格项在单元格内的垂直对齐（取值同 justify-items）。

place-items 简写形式，例如 place-items: center stretch; 垂直居中，水平拉伸

justify-content 当网格总尺寸小于容器时，控制整体水平分布（start/end/center/stretch/space-around/space-between/space-evenly）。

align-content 控制整体垂直分布（取值同 justify-content）。

grid-auto-columns 定义隐式创建的列的尺寸（如网格项超出定义的行列时）。

grid-auto-rows 定义隐式创建的行的尺寸。

grid-auto-flow 控制自动放置策略：

row（默认逐行填充）

column（逐列填充）

dense（尝试填充空白）

`grid-template-columns和grid-template-rows`

`grid-template-areas`

通过命名区域布局。需搭配子项的 grid-area ，实现效果如下图，相同命名的区域会进行合并：

对应的HTML和CSS如下：

<!-- grid-template-areas -->
<div class="property-section">
  <h3><code>grid-template-areas</code> - 定义网格区域</h3>
  <div class="property-values">
    <div class="value-item">
      使用字符串定义区域名称
    </div>
    <div class="value-item">
      点号(.)表示空单元格
    </div>
  </div>
  
  <div class="example-section">
    <div class="example-container grid-template-areas-example">
      <div class="grid-item header">Header</div>
      <div class="grid-item sidebar">Sidebar</div>
      <div class="grid-item main">Main Content</div>
      <div class="grid-item footer">Footer</div>
    </div>
    <div class="example-label">grid-template-areas定义的页面布局</div>
  </div>
</div>

.grid-template-areas-example {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 100px 200px 100px;
  grid-template-areas: 
    "header header"
    "sidebar main"
    "footer footer";
}

.header { grid-area: header; background-color: #1d3557; }
.sidebar { grid-area: sidebar; background-color: #a8dadc; color: #1d3557; }
.main { grid-area: main; background-color: #f1faee; color: #1d3557; }
.footer { grid-area: footer; background-color: #457b9d; }

唯一限制：区域必须是矩形

命名区域的唯一限制是：一个命名区域必须形成一个单一的矩形区域，不能是分散的、不连续的形状。

`grid-template`

grid-template 简写形式，合并 grid-template-rows/columns/areas。例如：

grid-template:
  "head head" 80px
  "nav main" 1fr
  / 200px 1fr;

gap

gap 属性用于设置网格项（grid items）之间的间距，包括行与行之间、列与列之间的间隔。它是 row-gap 和 column-gap 的简写属性，语法简洁且常用。也可通过row-gap 和 column-gap单独控制间距。

注意事项：gap 仅作用于网格项之间，不会在网格容器的边缘（与父元素的边界）产生间距；

justify-items

justify-items 用于控制网格项（grid items）在水平方向上的对齐方式。它对网格容器内所有子项生效，但可通过 justify-self 为单个子项覆盖。

.grid-container {
  display: grid;
  justify-items: center; /* 所有子项水平居中 */
  grid-template-columns: 100px 100px;
  gap: 10px;
}

属性值及效果:

start
网格项与网格单元格的起始边缘（左对齐）对齐。

end
网格项与网格单元格的结束边缘（右对齐）对齐。

center
网格项在单元格内水平居中对齐。

stretch（默认值）
网格项水平拉伸以填满整个单元格（除非有固定宽度限制）。

align-items

align-items 用于控制子元素在交叉轴（垂直于主轴）方向上的对齐方式。但可通过 align-self 为单个子项覆盖。

.container {
  display: grid;
  align-items: center; /* 网格项向列轴中点对齐 */
}

属性值及效果

flex-start：子元素向交叉轴起点对齐（顶部或左侧）。

flex-end：子元素向交叉轴终点对齐（底部或右侧）。

center：子元素居中对齐。

baseline：子元素按基线对齐（文本对齐常用）。

stretch（默认值）：子元素拉伸以填满交叉轴空间（需未设置固定高度/宽度）。

place-items

place-items 用于同时设置 align-items 和 justify-items 的值。它在 Grid 和 Flexbox 布局中非常有用，可以快速定义子元素在容器内的对齐方式。如果只提供一个值，该值将同时应用于两个属性。

place-items: <align-items> <justify-items>;

支持的值为：

start：对齐到容器的起始边缘。

end：对齐到容器的结束边缘。

center：居中对齐。

stretch（默认）：拉伸以填充容器。

justify-content

justify-content 用于控制主轴（main axis）上子元素的排列方式。该属性决定了容器内的剩余空间如何分配给子元素或子元素之间的间隔。

justify-content: flex-start;

支持的值为：

start: 左对齐
end: 右对齐
center: 居中对齐
stretch: 拉伸填满容器
space-around: 每个项目两侧间隔相等
space-between: 两端对齐，项目间间隔相等
space-evenly: 项目间和边缘间隔都相等

align-content

align-content 用于控制容器内多行或多项在交叉轴（垂直于主轴）上的对齐方式。

.container {  
  display: grid;  
  grid-template-rows: repeat(3, 100px);  
  align-content: center; /* 垂直居中所有行 */  
}

属性值及效果：

flex-start：多行紧贴容器起始端对齐。

flex-end：多行紧贴容器末端对齐。

center：多行居中。

space-between：首行贴起始端，末行贴末端，其余行均匀分布。

space-around：每行两侧间距均等（行间间距为边缘间距的两倍）。

space-evenly：所有间距（包括边缘）完全均等。

stretch（默认）：拉伸行以填满容器高度。

`place-content`

place-content 用于同时设置 align-content 和 justify-content 的值。它适用于网格（Grid）和弹性盒子（Flexbox）布局，用于控制容器内项目的整体对齐方式。

语法

place-content: <align-content> <justify-content>;

若只指定一个值，该值会同时应用于 align-content 和 justify-content。

若指定两个值，第一个为 align-content，第二个为 justify-content。

通用对齐值：

start：项目向容器起始端对齐。
end：项目向容器末端对齐。
center：项目居中对齐。
stretch（默认）：项目拉伸以填充容器（仅对 align-content 有效）。

grid-auto-colunms/grid-auto-rows

grid-auto-columns 和 grid-auto-rows 是用于控制隐式网格轨道（即未被显式定义的网格轨道）的尺寸。当网格项目被放置在显式定义的网格之外时，浏览器会自动创建隐式轨道，此时这两个属性会生效。

.container {
  grid-auto-columns: <track-size>;
  grid-auto-rows: <track-size>;
}

`grid-auto-flow`

grid-auto-flow 用于控制自动放置的网格项目（grid items）在网格容器中的排列方式。当网格项目数量超过显式定义的网格轨道（tracks）时，该属性决定了剩余项目的自动排列规则。

grid-auto-flow: [row | column] || dense;

row

默认值。网格项目按行优先顺序排列，即从左到右填充每一行，直到所有项目放置完毕。若空间不足，剩余项目会移动到下一行。

column

网格项目按列优先顺序排列，即从上到下填充每一列，直到所有项目放置完毕。若空间不足，剩余项目会移动到下一列。

dense

启用密集填充模式。网格会尝试填补之前因项目过大而留下的空白区域。可与 row 或 column 组合使用（如 grid-auto-flow: row dense）。

`grid-column-start` / `grid-column-end` / `grid-row-start` / `grid-row-end`

这些属性用于定义网格项在列方向上的起始和结束位置。通过指定网格线的编号或名称来控制项目占据的列范围。

数值：直接使用网格线编号（从1开始）。例如：grid-column-start: 2 表示从第2条垂直线开始。

span 关键字：结合数值表示跨越的列数。例如：grid-column-end: span 3 表示跨越3列。

命名线：如果网格定义了命名线（如 [sidebar-start]），可直接使用名称：grid-column-start: sidebar-start。

.item {
  grid-column-start: 1;     /* 从第1条垂直线开始 */
  grid-column-end: span 2;   /* 跨越2列 */
}

grid-row-start/end 指定行线位置，用法同列属性。

`grid-column` 和 `grid-row`

简写形式：

grid-column：合并 grid-column-start 和 grid-column-end。
语法：grid-column: <start> / <end>
示例：grid-column: 1 / span 3

grid-row：合并 grid-row-start 和 grid-row-end。
语法：grid-row: <start> / <end>
示例：grid-row: 2 / 5

.item {
  grid-column: 1 / span 2;  /* 从第1列开始，跨越2列 */
  grid-row: 2 / 4;           /* 从第2行到第4行 */
}

`grid-area`

grid-area 用于定义网格项在网格中的位置和大小。它可以合并 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 四个属性，或直接指定网格区域的名称。

grid-area 指定项目放置的区域：

grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
grid-area: <area-name>;

可接受 4 个线编号（row-start/column-start/row-end/column-end）

或使用 grid-template-areas 定义的名称

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

`justify-self`

justify-self 单个项目的水平对齐（覆盖容器的 justify-items）。

`align-self`

align-self 单个项目的垂直对齐（覆盖容器的 align-items）。

`place-self`

place-self 简写形式，例如 place-self: center end;。

函数与关键字

`repeat()` 函数简化重复模式

repeat() 函数在编程中常用于字符串或数组的重复操作

grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px);

`minmax()` 定义尺寸范围

minmax() 允许网格轨道在响应式布局中动态调整，确保内容在不同屏幕尺寸下保持可读性。例如：

.container {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(300px, 2fr);
}

第一列的最小宽度为 200px，最大宽度为 1fr。
第二列的最小宽度为 300px，最大宽度为 2fr。

`auto-fill和auto-fit`

auto-fill 和 auto-fit 是 CSS Grid 中用于自动填充网格轨道的两种模式，常用于 repeat() 函数中（如 grid-template-columns: repeat(auto-fill, minmax(100px, 1fr))）。两者的核心区别在于处理多余空间的方式：

grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

auto-fill
尽可能创建更多的轨道，即使这些轨道没有内容填充。多余空间会被保留，轨道会根据 minmax() 的规则拉伸或收缩。
适用于不确定项目数量但希望保持网格布局完整性的场景。

auto-fit
创建轨道的逻辑与 auto-fill 相同，但会折叠所有空轨道（将它们的宽度合并到剩余空间中）。
适用于项目数量较少时，希望内容填充可用空间的场景。

/* auto-fill：始终保留轨道结构 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

/* auto-fit：折叠空轨道 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

效果对比