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
palce-content

grid-template-columns 和 grid-template-rows

• 对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单位（网格剩余空间比例单位）
• 有时候，我们网络的划分是很有规律的，如果需要添加多个纵横网络时，就可以利用repeat()语法进行简化操作。

    
    
    
        
        
        
        
    
    
        

            
1
            
2
            
3
            
4
            
5
            
6
            
7
            
8
            
9
            
10
            
11
            
12
        
    
    

单位 fr

    
    
    
    


    

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
        
9
    

grid-template-area 和 grid-template

• area是区域的意思 grid-template-area就是给我们的网格划分区域的。此时grid子项只要使用grad-area属性指定其隶属于哪个区
• grid-template是grid-template-rows，grid-template-columns和grid-template-areas属性的缩写。

    


    
    
    
    


    

        
1
        
2
        
3
    

复合写法

    
    
    
        
        
        
        
    
    
        

            
1
            
2
            
3
        
    
    

grid-column-gap和grid-row-gap

• grid-column-gap和grid-row-gap属性用来定义网格中网格间隙的尺寸
• CSS grid-gap属性是grid-column-gap和grid-row-gap的复合写法

    
    
    
        
        
        
        
    
    
        

            
1
            
2
            
3
        
    
    

justify-items 和 align-items

• justify-items指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐。
• align-items指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下对齐。
• place-items可以让align-items和justify-items属性写在单个声明中。

注：
    使用这两个属性之后，网格不在撑开 而是用内容去撑开。

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

    
    
    
        
        
        
        
    
    
        

            
1
            
2
            
3
            
4
            
5
            
6
            
7
            
8
            
9
        
    
    

justify-content 和 align-content

• justify-content指定了网格元素的水平分布方式。
• align-content指定了网格元素垂直分布方式。
• place-content可以让justify-content和align-content属性写在一个CSS声明中。

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

    
    
        
        
        
        
    
    
        

            
1
            
2
            
3
            
4
            
5
            
6
            
7
            
8
            
9
        
    
    

作用在grid子项上的css属性

取值	含义
grid-column-start	水平方向上占据的起始位置。
grid-column-end	水平方向上占据的结束位置。（span属性）
grid-row-start	垂直方向上占据的起始位置。
grid-row-end	垂直方向上占据的结束位置。（sapn属性）
grid-column	grid-column-start + grid-column-end的缩写。
grid-row	grid-row-start + grid-row-end 的缩写。
grid-area	表示当前网格所占用的区域，名字和位置两种表示方法。
justifty-self	单个网格元素的水平对齐方式。
align-self	单个网格元素的垂直对齐方式。
place-self	align-self 和 justify-self的缩写。

    
    
    
        
        
        
        
    
    
        

            
1
        
    
    

    
    
        
        
        
        
    
    
        

            
1
            
2
            
3
            
4
            
5
            
6
            
7
            
8
            
9