CSS--灵活的网格布局（display:grid；）

​

flex 弹性布局和 grid 网格布局有什么区别呢？

1、flex 比 grid 的使用更广泛：flex 和 grid 的布局方式都是比较灵活的布局方式，在实际的运用上其实最常用的是 flex，因为大多数情况我们只需要在页面中由上到下地去布局，这时使用div盒子搭配 flex 足以满足需求，所以实际上grid网格布局并不常用；

2、flex 适合微观布局，grid 适合宏观布局：在对页面上的一个小维度的部分进行布局时 flex 更简单好用些；对整体的布局或者类似于表格的布局时用 grid 更合适些；

3、flex 是一维布局，grid 是二维布局：flex 布局一次只处理一个维度上的元素布局，一行或者一列，grid 布局将容器划分成了“行”和“列”，形成了网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。

4两种布局方式其实没有好坏之分，只是需要根据不同的需求去选择合适的布局方式

为什么要用grid?

1、grid把页面分成了一个个的小格子，可以任意组合与合并；
2、grid可以在不改变dom结构的情况下改变盒子的位置顺序，并且可以通过行线和列线精确到某一个位置上去；
3、对于宏观的整体布局上，代码量更少；

grid怎么用？

grid整体上一共包含三种功能：设置行列数量长度、在父容器内对小网格布局、合并网格。

以下面的dom为例，对以下页面内容进行网格布局：

<div class="grid-container">
    <div class="grid-item item-1">1</div>
    <div class="grid-item item-2">2</div>
    <div class="grid-item item-3">3</div>
    <div class="grid-item item-4">4</div>
    <div class="grid-item item-5">5</div>
    <div class="grid-item item-6">6</div>
    <div class="grid-item item-7">7</div>
    <div class="grid-item item-8">8</div>
    <div class="grid-item item-9">9</div>
</div>

基本样式为：

.grid-item {
   
   background: blanchedalmond;
   border: 1px solid #000;
   text-align: center;
}

一、设置网格列宽和行高及其各自数量

网格布局就是把很多个小盒子作为一个小网格放在一个大盒子里，开发人员可以对它的行和列的数量和长度进行灵活设置。

1、grid-template-columns：设置列，接收多个数据，数量为列的数量，值为列宽，以空格分隔，值为auto时为自适应相同列宽
2、grid-template-rows：设置行，接收多个数据，数量为行的数量，值为行高，以空格分隔，值为auto时为自适应相同行高

.grid-container {