人类计算机技术发展到现在，每天都会有很多新的东西被创造出来，有一些受到了广泛的认可，推广开来。也有一些非常好的点，但是由于各种原因限制，而没有得到广泛的使用。今天要讨论的grid就是其中之一。

grid可以说是web布局的最新解决方案，也可以说是目前最好的解决方案。

以前我们布局，有一个东西叫做文档流，也就是说我们的页面其实是从上到下从左到右一点一点堆积起来的。不过有了grid之后这个情况将会发生改变，如果说以前的文档流布局是一维布局的话，那么grid我们可以把它理解成二维布局。

一维布局：

devextreme grid 行按钮_devextreme grid 行按钮

二维布局：

devextreme grid 行按钮_devextreme grid 行按钮_02

从上面示意图中可以看出来，二维布局不需要局限于文档流的规则，布局更加灵活，接下来，我们一点点来了解一下这个神奇的东西吧：

首先，grid的基本概念其实就是在父元素身上挖坑，然后用子元素去填。这有点像我们上学的时候食堂里用来盛饭的盘子：

devextreme grid 行按钮_grid_03

可以看到盘子上就已经挖好了各种形状，小方格，大方格...  如果有鱼，则可能会有更大的方格。那么这些方格就是在父元素身上去进行定义，子元素只需要填入对应的方格中，自然就成为那个方格的形状了。当然了，目前来说html页面中所有的元素都是矩形，这点需要注意一下。

说了这么多，概念都了解了，那接下来就开始来做点真东西吧。老是说吃的，都饿了！

要使用grid  那么首先需要把元素的display属性改为 grid 

.box{
    display:grid;
}

现在，box这个元素就已经变成一个grid元素了，那么按照我们上面所说，现在需要在box身上去挖坑，其实也就是在box里面分行分列，这些行与列所组成的网格也就可以理解成一个个的坑了，就像插入excel表格一样。

比如说我们现在需要在box里面放4个元素，那么我们可以怎么去设置这些行与列呢？ 

我想到三种种，

  • 一种是4个元素在同一行，那么也就是：一行四列
  • 一种是两个元素一行，那么也就是：两行两列
  • 还有就是一个元素一行，那么也就是：四行一列

总之，我们首先需要弄清楚我们的元素会分成多少行，多少列。弄清楚这个之后才能去父级身上挖坑。

那么如何去规定父级身上的坑是多少行多少列呢？那就需要用到下面这两个属性了：

grid-template-columns
grid-template-rows

从属性上来看应该差不多能看明白了，第一个：grid-tamplate-columns 用来规定把父级的空间分割成多少列以及每一列的宽度，（column 也就是列的意思）。看案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            height: 300px;
            display: grid;
            grid-template-columns: 100px 200px 300px; }
        .box .item {
            background: #ddd;
            border: 1px solid #333; }
    </style>
</head>
<body>

<div class="box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

</body>
</html>

devextreme grid 行按钮_devextreme grid 行按钮_04

可以看到在这个案例中，父级box身上设置了 grid-template-columns: 100px 200px 300px;  那么这就代表了把box分割成3列，并且第一列的宽度时100px、第二列的宽度是200px、第三列300px  以此类推。

然后可以发现每一个子元素都会有高度，这是由于我们并没有把box分割成为多行，所以默认box里面就只有一行，并且这一行的高度就是box的高度，所以子级的高度就统一是300了。

可以看到子级item身上并没有设置太多样式，紧紧是为了能看见所以设置了背景颜色，以及为了能区分开来这几个元素设置了边框。因为每一个item的宽度高度其实都已经被父级限定好了。

再来看grid-template-rows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 300px;
            display: grid;
            grid-template-rows: 100px 200px 300px; }
        .box .item {
            background: #ddd;
            border: 1px solid #333; }
    </style>
</head>
<body>

<div class="box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

</body>
</html>

devextreme grid 行按钮_devextreme grid 行按钮_05

在这个案例中，同样也只设置了 grid-template-rows: 100px 200px 300px;  这代表把box拆分成3行，并且第一行的高度是100px, 第二行 200px 以此类推。另外box给了个300的高度，所以每一列的高度就自动是300了。

经过上面两个案例，那么大概可以看出来，grid其实就是把父级的空间分成多少行多少列，并且设置每一行每一列的宽高度，以此来控制里面的子元素。结合起来，如果来一个两行三列，则可以这样写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 300px;
            display: grid;
            grid-template-columns: 100px 40% 100px;
            grid-template-rows: 100px 100px; }
        .box .item {
            background: #ddd;
            border: 1px solid #333; }
    </style>
</head>
<body>

<div class="box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

</body>
</html>

devextreme grid 行按钮_网格布局_06

可以看到在grid-template-columns里面我用到了40%,  没错了，在这里面可以用百分比，也可以使用其他的单位，说白了这里是为了设置子元素的宽度  所以只要是宽度可以用的值在这里都是可以使用的。

另外有一个值需要特别注意一下，也是grid所独有的单位：fr 。它是一个相对单位，相当于弹性和模型里面的flex值。比如上面grid-template-columns的值也可以这样设置： grid-template-columns：1fr 1fr 1fr;  这样便是把box分成了三列，并且每一列的宽度都占box宽度的3分之一，为什么是三分之一呢？ 因为有3个fr。

那如果说这样呢？ grid-template-columns：1fr 1fr 3fr;  这样还是把box分成了3列，但是把box的宽度分成了5分，前面两个元素各占1分，最后这个元素则独占3分。

分成多少分，那就看总共有多少个fr  上面总共是5个fr。 每个子元素则占据指定的分数。比如最后一个元素，它身上是3个fr  所以最后一列的宽度则是父级宽度的 3/5。