之前我们讲过flex布局在实际项目中开发，今天我们来看看另一个新布局grid——网格布局

用过UI框架的童鞋一定对网格布局不陌生，大部分UI框架里都有。、

本次介绍只会介绍一些常用属性

容器属性

• grid布局

    
        
        
                
    
        
     1        
     2        
     3        
     4        
     5        
     6        
     7        
     8        
     9     
    
复制代码

打开chrome调试我们看到

也可以变成行内 display:inline-grid

• grid-template-columns && grid-template-rows

1.grid-template-columns定义列属性

.container{    display: grid;    grid-template-columns: 100px 100px 100px;}复制代码

2.grid-template-rows定义行属性

.container{    display: grid;    grid-template-rows: 100px 100px 100px;}复制代码

grid-template-columns && grid-template-rows相关其他属性

(1).宽度高度可以使用百分比

.container {  display: grid;  grid-template-columns: 33.33% 33.33% 33.33%;  grid-template-rows: 33.33% 33.33% 33.33%;}复制代码

(2).repeat() 使用repeat()可以少些重复的宽高 例如：

.container {  display: grid;  grid-template-columns: repeat(3, 33.33%);  grid-template-rows: repeat(3, 33.33%);}复制代码

重复的值可以是多个数值

grid-template-columns: repeat(2, 100px 20px 80px);复制代码

将多个元素看成一个整体 (3).fr 关键字 类似于vw、vh 1vw为宽度的1% 1r可以看做是50%

• grid-gap grid-gap为网格之间的宽度 grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式

grid-gap: 
     
     
      ;复制代码
     
    

.container {    display: grid;    grid-template-columns: repeat(12, 1fr);    grid-gap: 20px 20px;}复制代码

• grid-template-areas 可以通过自命名来规定每行块

.container {  display: grid;  grid-template-columns: 100px 100px 100px;  grid-template-rows: 100px 100px 100px;  grid-template-areas: 'a b c'                       'd e f'                       'g h i';}复制代码

上面的写法grid-template-areas里的内容名称可随便定义，可以相同，每行不限于个数

.container {    display: grid;    grid-template-columns: 100px 100px 100px;    grid-template-rows: 100px 100px 100px;    grid-template-areas: 'a a a a'        'd d d d'        'g g g g';}复制代码

需要注意的是grid-template-columns和grid-template-rows定义时个数如果大于grid-template-areas定义每列的个数，会显示grid-template-columns定义的个数

.container {    display: grid;    grid-template-columns: 100px 100px 100px;    grid-template-rows: 100px 100px 100px;    grid-template-areas: 'a a'        'd d'        'g g';}复制代码

• grid-auto-flow

排列的顺序，默认row先行再列，column先列后行

.container {    display: grid;    grid-template-columns: 100px 100px 100px;    grid-template-rows: 100px 100px 100px;    grid-template-areas: 'a a a'        'd d d'        'g g g';    grid-auto-flow: column;}复制代码

• place-items place-items为justify-items和align-items缩写 对齐方式 1.justify-items 一个内元素水平位置 2.align-items 一个内元素垂直位置

• place-content

place-items为justify-content和align-content缩写

1. justify-content grid块在容器的水平位置
2. justify-content grid块在容器的垂直位置

内部属性

    
        
        
                
    
        
     1        
     2        
     3        
     4        
     5        
     6        
     7        
     8        
     9    
    
复制代码

• item定在网格哪个网格

grid-column-start属性：左边框所在的垂直网格线 grid-column-end属性：右边框所在的垂直网格线 grid-row-start属性：上边框所在的水平网格线 grid-row-end属性：下边框所在的水平网格线

.item {  grid-column-start: 2;  grid-column-end: 4;}复制代码

span关键词 表示占几个网格

.item {  grid-column-start: span 2;}复制代码

• grid-area

放在哪个区域（非常好用）

.container {    display: grid;    grid-template-areas: 'a b c'                        'd e f'                        'g h i'}.item{    grid-area: e}复制代码

把item-1放在了areas定义e的位置

• place-self

place-self是align-self属性和justify-self属性的缩写

1. justify-self 单格内容水平位置
2. align-self 单格内容垂直位置

.container {    display: grid;    grid-template-areas: 'a b c'                        'd e f'                        'g h i'}.item{   grid-area: e;   place-self: center center;}复制代码

一些常用的属性，大致学习了一遍，项目中使用更多的还是看文档比较全面

CSS Grid 网格布局教程 —— 阮一峰