css - Grid布局

1. 区别:

• Flex布局:

   a. 它是轴线布局,只能指定"项目"针对轴线的位置.

   b. 可以看作是一维布局.

• Grid布局:

   a. 则是将容器划分成"行"和"列",产生单元格,再指定"项目所在"的单元格.

   b. 可以看作是二维布局.

Grid布局和 flex 布局时有实质性的区别的，flex 是一维布局，只能处理一个维度上的布局，一行或者是一列，但是 Grid 布局是二维布局，将容器划分成了 “行” 和” 列”，产生了一个个的网格，可以将网格元素放在行和列相关的位置上，从而达到了布局的目的。

<div class="container">

       <div class="item-1">

           <p class="sub-item">Grid布局</p>

       </div>

       <div class="item-2"></div>

       <div class="item-3"></div>

       <div class="item-4"></div>

       <div class="item-5"></div>

       <div class="item-6"></div>

   </div>