Grid 布局简易笔记

2018 年 11 月 6 日 15:03:19

属性介绍

Layout

Template

• grid-template grid-template-* 属性的缩写

• grid-template-rows 设置行高

• grid-template-columns 设置列宽

• grid-template-areas 设置具名栅格

• repeat 栅格可配合 repeat 实现快速布局

click here to see example

Item

• grid-area 栅格对应的区域的名称；也支持书写边界的名称，如 1 / 1 / 2 / 2，即横、纵方向上的第一个栅格

• grid-row 栅格在同一行上所占据的区域

• grid-row-start 区域在行的起始位置

• grid-row-end 区域在行的结束位置

• grid-column 栅格在同一列上所占据的区域

• grid-column-start 区域在列的起始位置

• grid-column-end 区域在列的结束位置

• span span 关键字，如果起始和结束位置是具名的，则没有效果；如果 span 后面紧跟一个 number 类型的值，则表示需要横跨几个区域

click here to see example

Gap

• grid-gap 间隙的缩写

• grid-row-gap 水平方向上的间隙

• grid-column-gap  垂直方向上的间隙

click here to see example

隐式栅格

对溢出栅格范围的区域进行控制

• grid-auto-row

• grid-auto-column

Align

Template

• justify-content 仅当栅格所占宽度小于容器宽度时生效。设置栅格区域在水平上的的对齐方式

• align-content 仅当栅格所占高度小于容器高度时生效。设置栅格区域在垂直上的的对齐方式

• justify-items 设置栅格区域内，每个格子水平上的对齐方式，默认是 stretch 填充满整个格子

• align-items 设置栅格区域内，每个格子垂直上的对齐方式，默认是 stretch 填充满整个格子

• place-items *-items 属性的缩写，eg: place-items: <align-items> <justify-items>

Item

• justify-self 设置栅格区域内，当前格子水平上的对齐方式

• align-self 设置栅格区域内，当前格子垂直上的对齐方式

• place-self *-self 属性的缩写，eg: place-self: <align-self> <justify-self>

click here to see example