Grid布局

1.网格布局（Grid）是强大的CSS布局方案，它将网页划分为一个个的网格，通过任意组合这些网格来实现不同需求的布局方式。
Grid布局是将容器划分成“行”和“列”，产生单元格，然后指定“项目所在”的单元格，可以看作是二维布局。

基本概念：
容器（container）——有容器属性
项目（items）——有项目属性
行（row)
列（column）
间距（gap) ——单元格之间的距离
区域（area）—— 自己划分每个单元格占据的区域
内容（content)
————————————————

基本概念.png

1.容器属性
grid-template-columns:设置每一列的宽度，可以是具体值，也可以是百分比
repeat():第一个参数是重复的次数，第二个参数是所要重复的值




    
    
    
    Document
    


    
        Item 1
        Item 2
        Item 3

image.png

grid-template-rows:设置每一行的宽度，可以是具体值，也可以是百分比




    
    
    
    Document
    


    
        Item 1
        Item 2
        Item 3
        Item 4
        Item 5
        Item 6
        Item 7
        Item 8
        Item 9

grid-template-rows.png

2.grid-column-start grid-column-end
grid-row-start grid-row-end (item占据多行多列)




    
    
    
    Document
    


    
        Item 1
        Item 2
        Item 3
        Item 4
        Item 5
        Item 6
        Item 7
        Item 8
        Item 9

image.png

简写方式:span
grid-columns grid-row



  
    
    
    
    Document
    
  
  
    
      Item 1
      Item 2
      Item 3
      Item 4
      Item 5
      Item 6
      Item 7
      Item 8
      Item 9

简写方式.png

3.minmax函数:函数产生一个长度范围，表示长度就在这个范围之中，它接受两个参数，分别为最小值和最大值(可实现类似响应式效果)



  
    
    
    
    Document
    
  
  
    
      Item 1
      Item 2
      Item 3
      Item 4
      Item 5
      Item 6
      Item 7
      Item 8
      Item 9

minmax.png

minmax-mobile.png

4.grid-template-areas:自定义网格布局



  
    
    
    
    Document
    
  
  
    
      
        我是header
      
      
        Content
        
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Placeat nam
          libero consectetur itaque perferendis laborum veritatis reiciendis
          incidunt repellendus laboriosam aspernatur, eos vero. Reprehenderit
          aliquam optio, quam repellat officia recusandae!
        
      
      
        联系我们
        
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Et nemo aut
          consequuntur sapiente magni quam amet quis eligendi quisquam placeat,
          nostrum vero porro molestiae laboriosam, odit repellat ad dolores
          magnam?
        
      
      
        标题一
        
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus
          quod veritatis porro dolore ratione reprehenderit hic consequuntur
          laborum maxime, velit quam omnis veniam et, odio ab quia repellendus
          repudiandae! Amet!
        
      
      
        标题二
        
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus
          quod veritatis porro dolore ratione reprehenderit hic consequuntur
          laborum maxime, velit quam omnis veniam et, odio ab quia repellendus
          repudiandae! Amet!
        
      
      
        标题三
        
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus
          quod veritatis porro dolore ratione reprehenderit hic consequuntur
          laborum maxime, velit quam omnis veniam et, odio ab quia repellendus
          repudiandae! Amet!
        
      
      Footer

grid-area.png

Grid布局

Content

标题一

标题二

标题三

你可能感兴趣的:(Grid布局)