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

时间 2019-11-05

标签下半年用用 grid 网格布局繁體版

原文原文链接

前言

如今咱们你们在实际的开发中，可能用的最多的就是flex布局，固然还有浮动和定位，除此以外，这两年一直听到网格布局是趋势，即grid布局，可是项目中没有太多的应用，因此特此总结一下，但愿对你们也对我本身有帮助。css

给你们一个直接的效果体验一下： html

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

容器相关属性

grid | inline-grid

display: grid;

display: inline-grid; 说明：类比于block于inline-block的区别，grid和inline-grid的区别也同样，后者能够和其余行内元素同时放在同一行上显示。

grid-template-rows | grid-template-columns

grid-template-rows: 设置行高

grid-template-columns：设置列宽

以上三个属性值能够是不少方式：浏览器

固定值： 50px等
repeat，以及auto-fill
fr关键字
auto关键字
minmax()函数

咱们来试试上面的5中形式：bash

首先，html内容都是以下：wordpress

//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

grid-row-gap: 设置行间距

grid-column-gap：设置列间距

grid-gap:

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

justify-items | align-items | place-items

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

justify-items: start | end | center | stretch

align-items:start | end | center | stretch

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

justify-content: stretch | start | end | center | space-between | space-around | space-evenly;

align-content: stretch | start | end | center | space-between | space-around | space-evenly;

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
}
复制代码

效果以下：

项目相关属性

grid-column-start：左边框所在的垂直网格线

grid-column-end：右边框所在的垂直网格线

grid-row-start：上边框所在的水平网格线

grid-row-end：下边框所在的水平网格线

grid-row | grid-column：缩写

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布局相关属性就介绍完了，相关属性比较多，也容易混淆，更多仍是要在咱们项目去实践使用，固然前提是对兼容性要求不高。

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

前端将来页面布局发展方向是 Flexbox 仍是 Grid ? www.zhihu.com/question/28…
张鑫旭： www.zhangxinxu.com/wordpress/2…
阮一峰：www.ruanyifeng.com/blog/2019/0…
flex vs grid: blog.csdn.net/iac743nj0b/…

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

前言

目录

容器相关属性

grid | inline-grid

grid-template-rows | grid-template-columns

1. 固定值

2. repeat()函数

3.fr关键字

4. auto关键字

5. minmax()函数

grid-template-areas

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

justify-items | align-items | place-items

justify-content | align-content | place-content

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

项目相关属性