CSS Grid网格布局入门

今日看了博客推送，关于css Grid布局，不规则布局，不是田字格，也不是九宫格。在此之前都是每个子div做定位的，简单粗暴。但今天看了这份，感触良多，不会的还很多: 任重道远

(原博主图，实现类似于下图的布局)

，首先给容器设置grid网格属性，然后再看有几行几列。4行5列了，那可以先实现一个4行5列的网格，沿着这个思路实现如下：

grid-container里面有12个div，代表12个格子.

    <div class="main">
        <div class="grid-container">
            <div class="grid-item one">1</div>
            <div class="grid-item two">2</div>
            <div class="grid-item three">3</div>
            <div class="grid-item four">4</div>
            <div class="grid-item five">5</div>
            <div class="grid-item six">6</div>
            <div class="grid-item seven">7</div>
            <div class="grid-item eight">8</div>
            <div class="grid-item nine">9</div>
            <div class="grid-item ten">10</div>
            <div class="grid-item eleven">11</div>
            <div class="grid-item twelve">12</div>
        </div>
    </div>

display: grid设置容器网格属性.
grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高

.main{
  width: 1200px;
  margin: 30px auto 0;
}
.grid-container{
  display: grid;
  grid-template-columns: 385px 180px 180px 180px 180px;
  grid-template-rows: 180px 180px 180px 180px;
}
.grid-item{
  border: 2px solid rgb(233,171,88);
  border-radius: 5px;
  background-color: rgba(233,171,88,.5);
}

完成了第一步之后，对比效果图，发现行与行之间和列与列之间都有一定的距离。接下来就开始添加行和列之间的间距。

grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）

.main{
  width: 1200px;
  margin: 30px auto 0;
}
.grid-container{
  display: grid;
  grid-template-columns: 385px 180px 180px 180px 180px;
  grid-template-rows: 180px 180px 180px 180px;
  grid-column-gap: 24px;  //新增
  grid-row-gap: 24px; // 新增
}
.grid-item{
  border: 2px solid rgb(233,171,88);
  border-radius: 5px;
  background-color: rgba(233,171,88,.5);
}

接下来关键的一步，就是给对应的格子设置跨几行几列了，和表格的rowspan和colspan类似。如果不设置，则默认占1行1列。（网格线）

grid-column-start属性：左边框所在的垂直网格线
grid-column-end属性：右边框所在的垂直网格线
grid-row-start属性：上边框所在的水平网格线
grid-row-end属性：下边框所在的水平网格线

下图，是4x4的网格，有5x5的网格线。所以网格是有网格线划出来的

整体css

        .main {
            width: 1200px;
            margin: 30px auto 0;
        }

        .grid-container {
            display: grid;
            grid-template-columns: 385px 180px 180px 180px 180px;
            grid-template-rows: 180px 180px 180px 180px;
            grid-column-gap: 24px;
            grid-row-gap: 24px;
        }

        .grid-item {
            border: 2px solid rgb(233, 171, 88);
            border-radius: 5px;
            background-color: rgba(233, 171, 88, .5);
        }

        .grid-item.one {
            grid-row-start: 1;
            grid-row-end: 3;
        }

        .grid-item.two {
            grid-column-start: 2;
            grid-column-end: 4;
        }

        .grid-item.three {
            grid-column-start: 4;
            grid-column-end: 6;
        }

        .grid-item.six {
            grid-column-start: 4;
            grid-column-end: 6;
        }

        .grid-item.eight {
            grid-column-start: 2;
            grid-column-end: 4;
            grid-row-start: 3;
            grid-row-end: 5;
        }

        .grid-item.ten {
            grid-column-start: 5;
            grid-column-end: 6;
            grid-row-start: 3;
            grid-row-end: 5;
        }

一个简单的CSS Grid网格布局就做好了。。。