CSS - grid布局

本文为作者的笔记，详见阮一峰的博客

网格线

网格线图片

注意

网格线从1开始计数

父元素属性

> display

值	说明
grid	块元素
inline-grid	行内元素

---

> grid-template-columns, grid-template-rows：列宽行高

• grid-template-columns: 每列列宽
• grid-template-rows: 每行行高

值：

• 绝对单位：grid-template-columns: 100px 100px 100px表示三列，列宽均为100px
• 百分比单位: grid-template-columns: 25% 25% 25% 25%表示四列，均分总宽度
• fr关键字：grid-template-columns: 100px 1fr 2fr表示三列，第一列固定宽度100px，继续为第二列和第三列分配剩余宽度，其中第三列宽度是第二列的两倍

repeat()函数

用法：repeat([重复次数], ...)

例如：grid-template-columns: 25% 25% 25% 25%可简写为grid-template-columns: repeat(4, 25%)

auto-fill与auto-fit关键字

• auto-fill：尽可能容纳多的单元格模式，直到放不下后换行；宽度足够后一行容纳时用空行填充以剩余宽度
• auto-fit：尽可能容纳多的单元格模式，直到放不下后换行；宽度足够后一行容纳时扩大单元格宽度以填充剩余宽度

例如：grid-template-columns: repeat(auto-fill, 100px)

minmax()函数

用法：minmax([最小值], [最大值])

例如：grid-template-columns: 1fr 1fr minmax(100px, 1fr)

auto关键字

浏览器自行决定宽度

> grid-template-area：划定区域

划定区域并命名，以便在子元素属性中指定

例如（单元格合并）：

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

若有些区域无需利用，则用.表示（不属于任何区域）

例如：

grid-template-areas: 'a . c'
                     'd . f'
                     'g . i';

注意

区域命名会影响网格线，区域起始的（水平和垂直）网格线自动命名为[区域名]-start，区域结束的网格线自动命名为[区域名]-end

> grid-template: (grid-template-columns) (grid-template-rows) (grid-template-area) 属性简写合并

> grid-row-gap, grid-column-gap 行间距与列间距

• grid-row-gap：行间距
• grid-column-gap：列间距

> grid-gap: (grid-row-gap) (grid-column-gap) 属性简写合并

grid-gap网格间距

> grid-auto-flow: 填充顺序

值	描述
row(默认)	先行后列
column	先列后行
row dense	先行后列，并尽可能紧密填满，尽量不出现空格
column dense	先列后行，并尽可能紧密填满，尽量不出现空格

先行后列

先列后行

> justify-items：单元格内容在单元格内水平位置

值	说明
start	单元格内部首对齐
end	单元格内部尾对齐
center	单元格内部居中
stretch(默认)	拉伸，占满全部宽度

单元格内容水平位置justify-items: start时

---

> align-items：单元格内容在单元格内垂直位置

值	说明
stretch(默认)	拉伸，占满全部宽度
start	单元格内部首对齐
end	单元格内部尾对齐
center	单元格内部居中

单元格内容垂直位置align-items: start时

> place-items: (align-items) (justify-items) 属性简写合并

---

> justify-content：网格在容器内水平位置

值	说明
stretch(默认)	拉伸至占满整个容器宽度
start	与容器起始边框对齐
end	与容器结束边框对齐
cneter	在容器内部居中
space-between	每列之间间隔相等，与容器两端没有间隔
space-around	每列之间间隔相等，是列与容器两端间隔的两倍
spcace-evenly	每列之间间隔、列与容器两端间隔均相等

justify-content: stretch

justify-content: start

justify-content: end

justify-content: center

justify-content: space-between

justify-content: space-around

justify-content: space-evenly

> align-content：网格在容器内垂直位置

与justify-content除方向不同外其它均相同

> place-content: (align-content) (justify-content) 属性简写合并

子元素属性

---

> grid-column-start, grid-column-end, grid-row-start, grid-row-end：指定项目位置

• grid-column-start：单元格左边框所在的垂直网格线
• grid-column-end：单元格右边框所在的垂直网格线
• grid-row-start：单元格上边框所在的水平网格线
• grid-row-end：单元格下边框所在的水平网格线

值：可使用数字或网格线名称

例如：

.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}

运行结果

提示

可结合grid-auto-flow的dense进行布局

span 关键字

表示跨越多少个网格

例如：

grid-column-start: span 2 与 grid-column-end: span 2效果相同，均代表单元格横向跨越2个网格

> grid-column: (grid-column-start) / (grid-column-end) 属性简写合并

> grid-row: (grid-row-start) / (grid-row-end) 属性简写合并

> grid-area：指定区域 或 (grid-row-start) / (grid-column-start) / (grid-row-end) / (grid-column-end) 属性简写合并

---

> justify-self：单元格内容水平位置

与 justify-items 一致，用于单个项目

> align-self：单元格内容垂直位置

与 align-items 一致，用于单个项目

> place-self: (justify-self) (align-self) 属性简写合并

与 place-items 一致，用于单个项目

总结整理

命名规则

前缀：

前缀	规则类型
justify-	水平规则
align-	垂直规则

后缀：

后缀	规则类型
-items	所有单元格规则
-content	网格内容规则
-self	单个子元素规则