CSS - grid 布局
...大约 5 分钟
本文为作者的笔记,详见阮一峰的博客
网格线
注意
网格线从 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-auto-flow: 填充顺序
值 | 描述 |
---|---|
row(默认) | 先行后列 |
column | 先列后行 |
row dense | 先行后列,并尽可能紧密填满,尽量不出现空格 |
column dense | 先列后行,并尽可能紧密填满,尽量不出现空格 |
> justify-items:单元格内容在单元格内水平位置
值 | 说明 |
---|---|
start | 单元格内部首对齐 |
end | 单元格内部尾对齐 |
center | 单元格内部居中 |
stretch(默认) | 拉伸,占满全部宽度 |
> align-items:单元格内容在单元格内垂直位置
值 | 说明 |
---|---|
stretch(默认) | 拉伸,占满全部宽度 |
start | 单元格内部首对齐 |
end | 单元格内部尾对齐 |
center | 单元格内部居中 |
> place-items: (align-items) (justify-items) 属性简写合并
> justify-content:网格在容器内水平位置
值 | 说明 |
---|---|
stretch(默认) | 拉伸至占满整个容器宽度 |
start | 与容器起始边框对齐 |
end | 与容器结束边框对齐 |
cneter | 在容器内部居中 |
space-between | 每列之间间隔相等,与容器两端没有间隔 |
space-around | 每列之间间隔相等,是列与容器两端间隔的两倍 |
spcace-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 | 单个子元素规则 |
Powered by Waline v3.4.1