Grid网格布局？

Grid网格布局？

Grid布局是一个二维的布局方法，纵横两个方向总是同时存在

作用在grid容器上	作用在grid子项上
grid-template-columns	grid-column-start
grid-template-rows	grid-column-end
grid-template-areas	grid-row-start
grid-template	grid-row-end
grid-column-gap	grid-column
grid-row-gap	grid-row
grid-gap	grid-area
justify-items	justify-self
align-items	align-self
place-items	place-self
justify-content
align-content
place-content

 

grid-template-columns和grid-template-rows：

对网格进行横纵划分，形成二位布局，单位可以是像素，百分比，自适应以及fr单位（网格剩余空间比例单位，类似弹性布局的flex-grow剩余空间法）

有时候，我们网格布局的划分是很规律的，如果需要添加多个横纵网格时，可以利用repeat()语法进行简化操作。

如四行三列     grid-template-columns:100px auto 25%; 三列的各宽度

                      grid-template-rows：100px 100px 200px 200px; 四行的各高度

         fr单位可认为是倍数关系，如grid-template-columns：1fr 2fr 2fr 1fr；

       横纵比较多的时候，可用repeat ,

      格式为grid-template-columns:repeat(重复的个数，大小);如repeat(6,2fr);

 

grid-template-areas和grid-template

area是区域的意思，grid-template-areas就是给我们的网格划分区域的，此时grid子项只要使用grid-area属性指定其隶属那个区

grid-template是grid-template-rows，grid-template-columns和grid-template-areas属性的缩写

 

grid-column-gap和grid-row-gap：

grid-column-gap和grid-row-gap属性用来定义网格中网格间隙的尺寸。

CSS grid-gap属性是grid-column-gap和grid-row-gap属性的缩写，（分别代表横纵间隙）

 

justify-items和align-items

justify-items指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐（只在左中右挪动）。align-items指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下（只在上中下挪动）对齐。

取值	含义
stretch	默认值，拉伸。表现为水平或垂直填充
start	表现为容器左侧或顶部对齐
end	表现为容器右侧或底部对齐
center	表现为水平或垂直居中对齐

 

place-items可以让align-items和justify-items属性写在单个声明中（分布是纵横）

 

justify-content和align-content：

justify-content指定了网格元素的水平分布方式，align-content指定了网格元素的垂直分布方式。

取值	含义
stretch	默认值，拉伸。表现为水平或垂直填充
start	表现为容器左侧或顶部对齐
end	表现为容器右侧或底部对齐
center	表现为水平或垂直居中对齐
space-between	表现为两端对齐
space-around	享有独立不重叠的空白空间
space-evenly	平均分配空白空间

place-content可以让align-content和justify-content属性写在一起

 

作用在grid子项上的css属性

取值	含义
grid-column-start	水平方向上占据的起始位置（指从列的边框数算起，边框从左到右为1.2.3.4....，从上到下为1.2.3.4....）
grid-column-end	水平方向上占据的结束位置（span属性，如span 2；指从起始位置开始横跨两个单元格）
grid-row-start	垂直方向上占据的起始位置
grid-row-end	垂直方向上占据的结束位置。（span属性，值为数字，代表该子项占据的单元格或网格数，只有end才有该属性）
grid-column	grid-column-start+grid-column-end的缩写（如3 / 6）
grid-row	grid-row-start+grid-row-end的缩写（如3 / 4；前一个是起始位置，后一个是结束位置）
grid-area	表示当前网格所占用的区域，名字和位置两种表示方法（如3 / 2 / 4 / 4; 分别代表水平起始位置，垂直起始位置，水平结束位置，垂直结束位置）
justify-self	单个网格元素的水平对齐方式
align-self	单个网格元素的垂直对齐方式
place-self	align-self和justify-self的缩写