跳至主要內容

CSS - grid 布局

Kamimika...大约 5 分钟CSS网格布局布局CSS笔记

本文为作者的笔记,详见阮一峰的博客open in new window

网格线

网格线图片
网格线图片

注意

网格线从 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-gap网格间距

> grid-auto-flow: 填充顺序

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

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

说明
start单元格内部首对齐
end单元格内部尾对齐
center单元格内部居中
stretch(默认)拉伸,占满全部宽度
单元格内容水平位置justify-items: start时
单元格内容水平位置justify-items: start时

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

说明
stretch(默认)拉伸,占满全部宽度
start单元格内部首对齐
end单元格内部尾对齐
center单元格内部居中
单元格内容垂直位置align-items: start时
单元格内容垂直位置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: stretch
justify-content: start
justify-content: start
justify-content: end
justify-content: end
justify-content: center
justify-content: center
justify-content: space-between
justify-content: space-between
justify-content: space-around
justify-content: space-around
justify-content: space-evenly
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-flowdense进行布局

span 关键字

表示跨越多少个网格

例如:

grid-column-start: span 2grid-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单个子元素规则
上次编辑于:
贡献者: wzh
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v3.4.1