Grid布局

约 1491 字大约 5 分钟

CSS

2025-09-13

在现代前端开发中，布局能力是基础也是关键。掌握 Flexbox、Grid，以及 定位（Position），你就可以应对绝大多数页面布局需求。

.main{
    display: grid
}

grid 块级的网格布局
inline-grid 行内的网格布局

grid-template-columns：用来指定列的宽度，有几个值就有几列，每个值都是对应的列宽

grid-template-rows：用来指定行的高度，有几个值就有几行，每个值都是对应的行高

其值可以是具体的长度值（如 px、em、rem 等），也可以是百分比，百分比对于列宽是相对父元素的宽度，对于行高是相对父元素的高度，还可以使用 fr 单位，fr 表示可用空间的分数单位。

比如 grid-template-columns: 1fr 2fr 1fr; 表示第一列占可用空间的 1 份，第二列占 2 份，第三列占 1 份。

auto 表示自动适应内容的大小,比如 grid-template-columns: 1 auto 1; 表示第二列的宽度根据内容自动调整。

repeat()：用来简化重复的列或行定义，比如 grid-template-columns: repeat(3, 1fr); 表示创建 3 列，每列宽度为 1fr，grid-template-columns: repeat(3, 100px 200px); 表示创建 6 列，依次为 100px、200px、100px、200px、100px、200px，也就是重复 3 次 100px 200px。

grid-template-gaps：用来设置网格项之间的间距，可以分别设置行间距和列间距，比如 grid-row-gap: 10px; 设置行间距为 10px，grid-column-gap: 20px; 设置列间距为 20px，或者使用简写 grid-gap: 10px 20px; 分别设置行间距和列间距。

justify-items：用来设置网格项在单元格内的水平对齐方式，可以设置为 start（左对齐）、end（右对齐）、center（居中）和 stretch（拉伸填满单元格，默认值）。

align-items：用来设置网格项在单元格内的垂直对齐方式，可以设置为 start（顶部对齐）、end（底部对齐）、center（居中）和 stretch（拉伸填满单元格，默认值）。

place-items：是 justify-items 和 align-items 的简写，可以同时设置水平和垂直对齐方式，比如 place-items: center; 表示水平和垂直都居中，place-items: start end; 表示水平左对齐，垂直底部对齐。

justify-content：用来设置整个网格在容器内的水平对齐方式，可以设置为 start（左对齐）、end（右对齐）、center（居中）、space-between（两端对齐，项目之间均匀分布）、space-around（项目之间均匀分布，项目两侧间距为项目间距的一半）和 space-evenly（项目之间均匀分布，项目两侧间距与项目间距相等）。

align-content：用来设置整个网格在容器内的垂直对齐方式，可以设置为 start（顶部对齐）、end（底部对齐）、center（居中）、space-between（两端对齐，项目之间均匀分布）、space-around（项目之间均匀分布，项目两侧间距为项目间距的一半）和 space-evenly（项目之间均匀分布，项目两侧间距与项目间距相等）。

place-content：是 justify-content 和 align-content 的简写，可以同时设置水平和垂直对齐方式，比如 place-content: center; 表示水平和垂直都居中，place-content: start end; 表示水平左对齐，垂直底部对齐。

justify-content和justify-items的区别在于前者是针对整个网格容器的内容进行对齐，而后者是针对单个网格项在其单元格内进行对齐。同理，align-content和align-items也是如此。

grid-template-areas：用来定义网格区域的名称和布局，可以通过给每个网格项指定 grid-area 属性来将其放置在对应的区域内。比如：

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

如果一些区域不需要使用，可以用 . 来表示空白区域，比如：

"header header header"
"sidebar . main"
"footer footer footer";

grid-row-start 和 grid-row-end：用来指定网格项在网格中的起始行和结束行位置，可以使用行号或者 span 关键字来表示跨越的行数。比如 grid-row-start: 1; grid-row-end: 3; 表示该网格项从第 1 行开始，到第 3 行结束，占据第 1 行和第 2 行。

grid-column-start 和 grid-column-end：用来指定网格项在网格中的起始列和结束列位置，可以使用列号或者 span 关键字来表示跨越的列数。比如 grid-column-start: 2; grid-column-end: 4; 表示该网格项从第 2 列开始，到第 4 列结束，占据第 2 列和第 3 列。

.item:nth-child(1){
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 3;
}

或者使用 grid-template-areas 定义时的区域名称来指定位置：

.item1 {
    grid-row-start: header-start;
    grid-row-end: header-end;
    grid-column-start: header-start;
    grid-column-end: header-end; 
}

/* 简写 */

.item1 {
    grid-row: header-start / header-end;
    grid-column: header-start / header-end;
}

/* 再简写 */

.item1 {
    grid-row: header;
    grid-column: header;
}

/* 再简写 */

.item1 {
    grid-area: header;
}

上述方法是最常用的，可以快速将网格项放置在指定区域内。

align-self：用来设置单个网格项在其单元格内的垂直对齐方式，可以覆盖 align-items 的设置。可以设置为 start（顶部对齐）、end（底部对齐）、center（居中）和 stretch（拉伸填满单元格，默认值）。

justify-self ：用来设置单个网格项在其单元格内的水平对齐方式，可以覆盖 justify-items 的设置。可以设置为 start（左对齐）、end（右对齐）、center（居中）和 stretch（拉伸填满单元格，默认值）。

place-self：是 align-self 和 justify-self 的简写，可以同时设置水平和垂直对齐方式，比如 place-self: center; 表示水平和垂直都居中，place-self: start end; 表示水平左对齐，垂直底部对齐。

CSS Grid 网格布局教程