16-grid布局

GRID布局

它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局

Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。
Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。
Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。

grid布局预热

• 容器和项目
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  <!-- 以上代码section为容器、div为项目 （项目不包括p标签） -->
  

• 行和列
  
  容器里面的水平区域称为"行"，垂直区域称为"列"。

• 单元格