项目(内容)在单元格中的垂直、水平位置
justify-items 水平位置:内容相对于单元格左右对齐方式(通常项目内容大小小于单元格宽度时)
align-items 垂直位置:内容相对于单元格上下对齐方式(通常项目内容大小小于单元格高度时)
取值:start:对齐单元格的起始边缘。
end:对齐单元格的结束边缘。
center:单元格内部居中。
stretch:拉伸,占满单元格的整个宽度(默认值)
place-items属性是align-items属性和justify-items属性的合并简写形式。
place-items: 垂直 水平; 【空格隔开】
如果省略第二个值,则浏览器认为与第一个值相等。
给网格划分区域grid-template-areas
网格布局允许指定"区域"(area),一个区域由单个或多个单元格组成
取值:默认值:none;一个双引号一行,一个空格一列
grid-column-start属性:左边框所在的垂直网格线
grid-column-end属性:右边框所在的垂直网格线
grid-row-start属性:上边框所在的水平网格线
grid-row-end属性:下边框所在的水平网格线
简写:grid-column属性是grid-column-start和grid-column-end的合并简写形式
grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。
- 以斜杠分割 开始/结束 - 斜杠以及后面的部分可以省略,默认跨越一个网格。
注:如果项目指定的网格区域是重叠的可以使用z-index 进行调整层级
单独指定单元素格内容的对齐
justify-self属性设置单元格内容的水平位置(左中右)
align-self属性设置单元格内容的垂直位置(上中下)
- start:对齐单元格的起始边缘。
- end:对齐单元格的结束边缘。
- center:单元格内部居中。
- stretch:拉伸,占满单元格的整个宽度(默认值)
简写
- place-self属性是align-self属性和justify-self属性的合并简写形式。
- 如果省略第二个值,place-self属性会认为这两个值相等