Grid 布局（一）

小萌新上线啦～～🎉🎉🎉
CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统。 这是一个二维系统，这意味着它可以同时处理列和行，不像 flexbox那样主要是一维系统。 你可以通过将CSS规则应用于父元素（成为网格容器Grid Container）和该元素的子元素（网格元素Grid Items），来使用网格布局。

Grid 布局

---

你的第一个Grid布局

---

HTML代码：

<div class="container0">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

CSS代码：

.container0{
    display: grid;
    max-width: 400px;
}

然后给每个Grid Items加上背景颜色就能得到下面效果

效果图
这样的效果还看不出来有二维的作用。

Columns（列）与rows（行）

---

为了是其成为二维的网格容器，我们需要定义行和列。我们将使用到grid-template-row和grid-template-column属性。
CSS代码：

.container0{
    display: grid;
    max-width: 400px;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
}

如上，grid-template-columns赋了三个值，我们就会得到三列，我们想要得到两行，因为我们给grid-template-rows赋两个值。这里我们觉得了Grid Items的宽（100px）高（50px）。结果如下：

效果图

Grid Items（子元素）

上面，我们有了个二维的网络容器，我们现在就来放置子元素Grid Items了。为了更好的理解。我们给每个元素加上单独的class
HTML代码：

<div class="container0">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
    <div class="item4">4</div>
    <div class="item5">5</div>
    <div class="item6">6</div>
</div>

然后给container0定义一个3x 3的gird（网格），得到下图布局：

3*3的grid(网格)布局
上图，我们只看到3x 2 的grid（网格），其实我们再添加三个 items，最后一行也会被填满。如下图，未被填满的效果图。
未被填满的3*3grid
要定位和调整items子元素大小，就要使用到grid-column和grid-row属性来设置：
CSS代码：

.item1{
    grid-column-start: 1;
    grid-column-end: 4;
}

grid-column效果图
这时候你可能会疑惑，为什么grid-column-end是为4呢，这里的4指的是网格线(Grid Line)，什么是网格线呢？构成网格结构的分界线。它们既可以是垂直的（“列网格线(column grid lines)”），也可以是水平的（“行网格线(row grid lines)”）。下图黑色的列网格线：
网格线图
以上属性grid-column-start和属性grid-column-end可以简写为grid-column属性，如上面一段CSS代码等同于下面这段CSS代码
CSS代码：

.item1{
    grid-column: 1/4;
}

上面，已经介绍了Grid的基本的属性，我们可以做个简单的布局
CSS代码：

.item1{
    grid-column: 1/3;
}
.item3{
    grid-row: 2/4;
}
.item4{
    grid-column: 2/4;
}

得到效果：

Grid布局的简单应用

当然，以上都是Grid布局简单的属性，Grid还有更强大灵活的特性，待小萌新更新上去～～如果有什么问题，欢迎评论。我会尽我所能回答哒～～～😊😊😊