grid布局

grid

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局

Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局

gird很强大

采用网格布局的区域，称为"容器"（container）。容器内部子元素，称为"项目"（item）。

 

        

            

        
        

            

        
        

            

        

/*最外层secition元素就是容器,里面三个div是项目,p是div子元素,因此不是项目.*/

作用在gird容器之中的属性

grid-template-rows

grid-template-columns

grid-template-areas 给我们网格划分区域,grid子项只要使用grid-area数学指定隶属于哪个区

grid-template

这个是grid-template-rows grid-template-columns grid-template-areas 属性的缩写

grid-column-gap

grid-row-gap

grid-gap

这个是grid-column-gap grid-row-gap属性的缩写

justify-items

align-items

place-items

justify-content

align-content

place-content

作用在gird子项上的属性

grid-row-start 垂直方向上占据的起始位置

grid-row-end 垂直方向上占据的结束位置 (span属性)

grid-row grid-row-start+grid-row-end的缩写

grid-column-start 水平方向上占据的起始位置

grid-column-end 水平方向上占据的结束位置

grid-column ``grid-column-start+grid-cloumn-end`

grid-area 当前网格占据的位置,名字和位置两种表现方式

justify-self 单个网格元素的水平对齐方式

align-self 单个网格元素的垂直对齐方式

place-self align-self+justify-self的缩写

gird-template-rows和grid-template-columns

对网格进行横纵划分,形成二维布局,单位可以是像素,百分比,自适应以及fr单位(网格剩余空间比例单位)

有时候网格划分很规律,如果需要添加多个横纵网络是,可以使用repeat()语法进行简化操作

grid-column-gap和grid-row-gap

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

这个是grid-row-gap grid-column-gap属性的缩写

justify-items和align-items

justify-items指定网格元素在网格内的水平呈现方式,是水平拉伸还是左右中呈现.

align-items指定网格元素在网格内的垂直呈现方式,是垂直拉伸还是上下中呈现.

place-items是align-items 和 justify-items的缩写

取值

stretch默认值,拉伸,表现为水平或者垂直填充

start 表现为容器左侧和顶部

end表现为容器右侧和底部对齐

center 表现为水平和垂直对齐

justify-content和align-content

justify-content指定了整体网格元素在网格内的水平分布方式

align-content指定了整体网格元素在网格内的垂直分布方式

place-content是align-content 和 justify-content的缩写

取值

stretch默认值,拉伸,表现为水平或者垂直填充

start 表现为容器左侧和顶部

end表现为容器右侧和底部对齐

center 表现为水平和垂直对齐

space-between表现为两端对齐

space-around 享有不重叠的空白空间

space-evenly 平均分配空白空间