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

寻觅人间美好
9,555 阅读9分钟

前言

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

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

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

目录

容器属性

  1. grid | inline-grid
  2. grid-template-rows | grid-template-columns
  3. grid-template-areas
  4. grid-row-gap | grid-column-gap | grid-gap
  5. justify-items | align-items | place-items
  6. grid-auto-rows | grid-auto-columns | grid-auto-flow

项目属性

  1. grid-row-start | grid-row-end | grid-column-start | grid-column-end
  2. grid-row | grid-column
  3. justify-self | align-self | place-self

容器相关属性

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;
}

效果如下：

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);
}

效果如下：

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

3.fr关键字

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

如下效果：

代码如下：

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

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

4. auto关键字

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

代码如下：

 .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);
}

我们来看一下效果：

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

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

效果如下：

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

以上，我们说了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;
    }

实现的效果如下：

我们来分析一下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

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

  1. justify-items: start | end | center | stretch
  2. align-items:start | end | center | stretch
  3. place-items: |

我们来看一个例子：

 .container {
    justify-items: stretch; //默认值
    align-items: stretch; // 默认值
 }

效果如下：

再来看看其他值：

.container {
    justify-items: start;
    align-items: end; 
 }

效果如下：

再 看看居中的效果：

.container {
    justify-items: center;
    align-items: center; 
 }

justify-content | align-content | place-content

  1. justify-content: stretch | start | end | center | space-between | space-around | space-evenly;
  2. align-content: stretch | start | end | center | space-between | space-around | space-evenly;
  3. place-content: 合并写法

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

.container {
    justify-content: start; 
    align-content: start;    
}

效果如下：

再看看居中的效果：

.container {
    justify-content: center; 
}

效果如下：

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

再来看看space-around:

.container {
    justify-content: space-around; 
}

效果如下：

继续看：space-evenly

.container {
    justify-content: space-evenly;
}

效果如下：

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

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

.container {
    justify-content: space-between;
}

效果如下：

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

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

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

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

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

.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-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都是项目的属性，用于设置项目在水平和垂直方向上的起始网格线和网格线，即项目的位置处于哪一行，那一列。 下面我们会详细介绍

效果如下：

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

.container {
    grid-auto-flow: row//默认值
}

改成垂直方向：

.container {
    grid-auto-flow: column
}

效果如下：

项目相关属性

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

例如：实现如下效果：

.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;
}

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

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

看到这个效果，可能就想到了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…
  2. 张鑫旭： www.zhangxinxu.com/wordpress/2…
  3. 阮一峰：www.ruanyifeng.com/blog/2019/0…
  4. flex vs grid: blog.csdn.net/iac743nj0b/…
avatar
文章
阅读
粉丝