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; 表示水平左对齐,垂直底部对齐。