2019下半年，该用用grid网格布局了！

电玩女神 2023-06-06 10:55 45阅读 0赞

# 前言 #

现在我们大家在实际的开发中，可能用的最多的就是flex布局，当然还有浮动和定位，除此之外，这两年一直听到网格布局是趋势，即grid布局，但是项目中没有太多的应用，所以特此总结一下，希望对大家也对我自己有帮助。

给大家一个直接的效果体验一下：

![1][]网格布局：就是一个容器内部由一个个的项目组成，是一个二维布局，接下来，我们就会围绕 **容器** 和 **项目**  来介绍网格布局，

# 目录 #

> 容器属性

> 项目属性

# 容器相关属性 #

## grid | inline-grid ##

> 1.  display: grid;
> 2.  display: inline-grid; 说明：类比于block于inline-block的区别，grid和inline-grid的区别也一样，后者可以和其他行内元素同时放在同一行上显示。

## grid-template-rows | grid-template-columns ##

> 1.  grid-template-rows: 设置行高
> 2.  grid-template-columns：设置列宽

以上三个属性值可以是很多方式：

1.  固定值： 50px等
2.  repeat，以及auto-fill
3.  fr关键字
4.  auto关键字
5.  minmax()函数

我们来试试上面的5中形式：

首先，html内容都是如下：

//html
    <div class="container">
        <div class="item">1</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 class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
    </div>

//公共css  
.container\{  
display: grid;  
grid-gap: 10px 10px;  
\}  
.container .item\{  
background: dodgerblue;  
\}  
复制代码

#### 1. 固定值 ####

//css
    .container{
        grid-template-rows: 50px 50px 50px;
        grid-template-columns: 50px 50px 50px;
    }
    复制代码

效果如下：

![1 1][]

#### 2. repeat()函数 ####

从上面的例子，我们可以看到如果有重复的固定值，那么我们就可以用repeat函数去代替

//css
    .container{
        grid-template-rows: repeat(3, 50px);
        grid-template-columns: repeat(3, 50px);
    }
    复制代码

有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。

.container{
        grid-template-rows: repeat(3, 50px);
        grid-template-columns: repeat(auto-fill, 50px);
    }
    复制代码

效果如下：

![1 2][]其中红色部分空的，但是是占据空间的，为了更生动的看一下效果，我们右击打开“检查”，查看一下element标签，我们可以看到如下效果： ![1 3][]其中浅蓝色的单元格都是自动生成的单元格，深蓝色的单元格是我们代码生成的。

#### 3.fr关键字 ####

即fraction的缩写，意为"片段"，用于表示单元格之间的比例关系，

如下效果：

![1 4][]

代码如下：

.container{
        width: 200px;
        grid-template-rows: repeat(3, 50px);
        grid-template-columns: 1fr 2fr 1fr;
    }
    复制代码

此时，我们设置了容器总宽度为200px, 然后按1:2:1的比例来分配，即中间的单元格为100px，两边为50px

#### 4. auto关键字 ####

我们来实现一个常见的三栏布局，即左右各200px,中间撑满剩余宽度。

![1 5][]

代码如下：

.container{
        grid-template-rows: repeat(3, 50px);
        grid-template-columns: 200px auto 200px;
    }
    复制代码

即auto对应的单元格会自动盛满剩余宽度

#### 5. minmax()函数 ####

顾名思义，设置一个范围，最大值和最小值

.container{
        grid-template-rows: repeat(3, 50px);
        grid-template-columns: 50px 50px minmax(50px, 100px);
    }
    复制代码

我们来看一下效果：

![1 6][]这个时候是按最大列宽显示的，为什么呢？这是因为此时我们的容器没有设置宽度，默认为auto，所以会按最大值去渲染，但是，我们如果设置容器宽度小于150px呢？（因为总共3列，前两列都是50px，第三列最小也是50px）

.container{
        grid-template-rows: repeat(3, 50px);
        grid-template-columns: 50px 50px minmax(50px, 100px);
        width: 140px;
    }
    复制代码

效果如下：

![1 7][]其中黄色部分就是多出来的，因为容器宽度为140px，前两列为50px, 第三列最小也是50px，再加上列间距，所以整体单元格宽度就超出了140px，如果不想超出，自己可以试着加一个overflow：hidden试试看另外的效果：

![1 8][]

以上，我们说了grid-template-rows，以及grid-template-columns常见属性值的形式，并且这些形式是可以相互在一起使用。

## grid-template-areas ##

该属性用来设置区域，我们通过上面我们知道，一个容器由一个个单元格（或者叫项目）组成，我们想要对这些单元格再做进一步的划分，不同的一个或多个单元格组成一个区域，这样就形成了：**容器>区域>单元格** 的基本形式。

代码如下：

//html
    <div class="container">
        <div class="item item-a">a</div>
        <div class="item item-b">b</div>
        <div class="item item-c">c</div>
        <div class="item item-d">d</div>
    </div>

//css  
.container\{  
display: grid;  
width: 150px;  
height: 150px;  
grid-template-rows: repeat(3, 1fr);  
grid-template-columns: repeat(3, 1fr);  
grid-template-areas:  
“a a a”  
“b c c”  
“b d d”  
\}  
.container .item\-a \{  
grid-area: a;  
background: dodgerblue;  
\}  
.container .item-b \{  
grid-area: b;  
background: green;  
\}  
.container .item-c \{  
grid-area: c;  
background: yellow;  
\}  
.container .item\-d \{  
grid-area: d;  
background: red;  
\}

实现的效果如下：

![Image 1][]

我们来分析一下grid-template-areas的作用是什么？很显然，它可以将单元格分类，不同的类表示不同的区域，同时，原本3x3的网格布局，需要指定9个单元格标签，而现在我们只需要四个标签，然后每个标签通过grid-area设置区域名，最后每个区域在哪里，怎么布局，是通过grid-tempate-areas去生成。

**即：通过grid-area为指定标签设置区域名，然后通过grid-template-areas设置区域怎么排版和显示**

**注意：我们设置的网格区域一定要形成规整的矩形区域，什么L形，凹的或凸的形状都是不支持的，会认为是无效的属性值。**

通过前面介绍，我们分别学习了：grid-template-rows grid-template-columns grid-template-areas, 当然这三个属性也可以合成一个属性，即grid-template

## grid-row-gap | grid-column-gap | grid-gap ##

> 1.  grid-row-gap: 设置行间距
> 2.  grid-column-gap： 设置列间距
> 3.  grid-gap:

这三个属性比较简单，不多说，在文章刚开始公共css文件中，我们也设置了间距，之前的效果图也都有间隔的。

## justify-items | align-items | place-items ##

用于设置网格元素(或者说是每个单元格的内容)在水平和垂直方向的上中下左右对齐，还是拉伸。

我们来看一个例子：

.container {
        justify-items: stretch; //默认值
        align-items: stretch; // 默认值
     }
    复制代码

效果如下：

![Image 1][]

再来看看其他值：

.container {
        justify-items: start;
        align-items: end; 
     }
    复制代码

效果如下：

![Image 1][]

再 看看居中的效果：

.container {
        justify-items: center;
        align-items: center; 
     }
    复制代码

![Image 1][]

## justify-content | align-content | place-content ##

首先，我们来看看默认的效果：

.container {
        justify-content: start; 
        align-content: start;    
    }
    复制代码

效果如下：

![Image 1][]

再看看居中的效果：

.container {
        justify-content: center; 
    }
    复制代码

效果如下：

![Image 1][]

同样，如果是：justify-content: end；则靠右显示。

再来看看space-around:

.container {
        justify-content: space-around; 
    }
    复制代码

效果如下：

![Image 1][]

继续看：space-evenly

.container {
        justify-content: space-evenly;
    }
    复制代码

效果如下：

![Image 1][]

注意：此处仔细观看space-around和space-evenly的区别，前者是保证每一列的左右间距相同，这样的话，比如第二列的左间距和第一列的右间距加起来就是两倍的距离了，但是space-evenly只是纯粹的控制列之间的间距等分。

最后，我们看一下：space-between

.container {
        justify-content: space-between;
    }
    复制代码

效果如下：

![Image 1][]

上面这几个属性和flex布局里面的属性都比较类似，大家可以试着对比去看看效果。

## grid-auto-rows | grid-auto-columns | grid-auto-flow ##

有时候，一些项目的指定位置，在现有网格的外部。比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。

例如：一个3x3的网格如下：

![Image 1][]

我们希望把第三个项目放到 第四行 和第三列，怎么处理？

.container .item:nth-child(3){
        grid-row-start: 4;
        grid-row-end: 5;
        grid-column: 3/4; //是grid-column-start和grid-column-end的缩写
        background: red;
    }
    复制代码

效果如下：

![Image 1][]此时，我们看到第三个项目，放到第四行第三列以后，高度变成自动包裹内容，怎么设置这个单独放出来的项目的样式呢？grid-auto-rows 和grid-auto-columns

.container {
        grid-auto-rows: 100px;
    }
    .container .item:nth-child(3){
        grid-row-start: 4;
        grid-row-end: 5;
        grid-column: 3/4; //是grid-column-start和grid-column-end的缩写
        background: red;
    }

//注意：此处的grid-row-start grid-column-start grid-column都是项目的属性，用于设置项目在水平和垂直方向上的起始网格线和网格线，即项目的位置处于哪一行，那一列。 下面我们会详细介绍  
复制代码

效果如下：

![Image 1][]

最后，我们看一下容器的最后一个属性：grid-auto-flow ，用来设置项目的排列方向，默认是水平方向，也可以是垂直方向

.container {
        grid-auto-flow: row//默认值
    }
    复制代码

![Image 1][]

改成垂直方向：

.container {
        grid-auto-flow: column
    }
    复制代码

效果如下：

![Image 1][]

# 项目相关属性 #

> 1.  grid-column-start：左边框所在的垂直网格线
> 2.  grid-column-end：右边框所在的垂直网格线
> 3.  grid-row-start：上边框所在的水平网格线
> 4.  grid-row-end：下边框所在的水平网格线
> 5.  grid-row | grid-column： 缩写
> 6.  grid-area: 设置项目的区域名

例如：实现如下效果：

![Image 1][]

.container{
        display: grid;
        grid-template-rows: repeat(4, 50px);
        grid-template-columns: repeat(4, 50px);
        grid-gap: 10px 10px;
        grid-auto-rows: 50px;
    }
    .container .item:nth-child(5){
        grid-row: 2/4;
        grid-column: 2/4;
    }

复制代码

通过这些属性，可以控制项目的位置，以及大小，可以实现类似合并单元格的效果哦。

接着上面的例子，实现如下效果：

![Image 1][]

看到这个效果，可能就想到了justify-items 和align-items 设置为center不就可以啦，

没错，但是justify-items和align-items是容器的属性，是对所有的项目有效的，如果我们只是想把某一个单元格设置怎么做？

.container .item:nth-child(5){
        justify-self: center;
        align-self: center;
    }
    复制代码

同理，也可以缩写：place-self: center center;

至此，grid布局相关属性就介绍完了，相关属性比较多，也容易混淆，更多还是要在我们项目去实践使用，当然前提是对兼容性要求不高。

下面是在学习过程中参考的一些网站：

1.  前端未来页面布局发展方向是 Flexbox 还是 Grid ? [www.zhihu.com/question/28…][www.zhihu.com_question_28]
2.  张鑫旭： [www.zhangxinxu.com/wordpress/2…][www.zhangxinxu.com_wordpress_2]
3.  阮一峰：[www.ruanyifeng.com/blog/2019/0…][www.ruanyifeng.com_blog_2019_0]
4.  flex vs grid: [blog.csdn.net/iac743nj0b/…][blog.csdn.net_iac743nj0b]

[1]: https://user-gold-cdn.xitu.io/2019/7/25/16c286e75ec156a0?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 1]: https://user-gold-cdn.xitu.io/2019/7/25/16c27bfe7c72aaa1?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 2]: https://user-gold-cdn.xitu.io/2019/7/25/16c27de73b2cb7d8?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 3]: https://user-gold-cdn.xitu.io/2019/7/25/16c27dab96f5a06b?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 4]: https://user-gold-cdn.xitu.io/2019/7/25/16c27e30aa677dc7?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 5]: https://user-gold-cdn.xitu.io/2019/7/25/16c27e6a2d8311c8?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 6]: https://user-gold-cdn.xitu.io/2019/7/25/16c27eb558cf277f?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 7]: https://user-gold-cdn.xitu.io/2019/7/25/16c27edba25f3fc8?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 8]: https://user-gold-cdn.xitu.io/2019/7/25/16c27f2d32970fda?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[Image 1]: 
[www.zhihu.com_question_28]: https://link.juejin.im?target=https%3A%2F%2Fwww.zhihu.com%2Fquestion%2F28691822
[www.zhangxinxu.com_wordpress_2]: https://link.juejin.im?target=https%3A%2F%2Fwww.zhangxinxu.com%2Fwordpress%2F2018%2F11%2Fdisplay-grid-css-css3%2F%23justify-items
[www.ruanyifeng.com_blog_2019_0]: https://link.juejin.im?target=http%3A%2F%2Fwww.ruanyifeng.com%2Fblog%2F2019%2F03%2Fgrid-layout-tutorial.html
[blog.csdn.net_iac743nj0b]: https://link.juejin.im?target=https%3A%2F%2Fblog.csdn.net%2Fiac743nj0b%2Farticle%2Fdetails%2F78797933