【css基础】都这个时候了，还不学学gird布局

开启

只需要：

.grid {
  display: grid;
}

默认子项按一列布局

---

设置子项宽度

设置子项宽度，每一个值代表一列。如果子项自己有设置单独宽度，还是会以gird设置的为主，但子项单独设置大了多的会溢出。

grid-template-columns: 100px 100px 100px;

设置子项宽度还可以用自动伸缩填充，如下说明左右各占1/4，中间占1/2。

grid-template-columns: 1fr 2fr 1fr;

---

设置子项高度

grid-template-rows: 200px 200px 200px;

其实设置的宽度高度只是给子项加了一个套，可以简单的理解为子项外面套了一个设置了宽高的元素。我把他叫做子壳。

---

设置间距

列间距

column-gap: 10px;

行间距

row-gap: 10px

同时设置行列

gap: 10px

---

指定区域排列

这个是个神器。

例如想做这个布局：

html的结构只需要：

<div class="grid">
    <div class="column one">1div>
    <div class="column tow">2div>
    <div class="column three">3div>
    <div class="column four">4div>
    <div class="column five">5div>
    <div class="column six">6div>
div>

css：

.grid {
    display: grid;
    grid-template-areas:  // 这个属性就是用来控制布局的
    "one one tow"
    "three four five" 
    "six six six";
}
.column {
    height: 100px;
    background-color: antiquewhite;
}
.one {
    grid-area: one; // 这个属性告诉grid-template-areas说，你里面的one就是类名为one的元素
}
.tow {
    grid-area: tow;
}
.three {
    grid-area: three;
}
.four {
    grid-area: four;
}
.five {
    grid-area: five;
}
.six {
    grid-area: six;
}

---

在子壳中垂直对齐

例如：

每个子项都对其垂直线的中间

.grid {
    display: grid;
    grid-template-columns: 200px 200px 200px;
    grid-template-rows: 200px 200px;
    align-items: center; // 值和flex布局是一样的
}
.column {
    width: 100px;
    height: 100px;
    background-color: antiquewhite;
}

---

在子壳中水平对齐

值和flex布局一样

justify-items: center;

---

父级控制整体子项的对其方式

例如这个子项的整体居中对齐：

.grid {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px;
    width: 800px;
    height: 600px;
    border: 1px solid red;
    align-content: center; // 垂直居中对其
    justify-content: center; // 水平居中对其
}
.column {
    background-color: antiquewhite;
}

这种方式能玩的很巧妙，例如：

.grid {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px;
    width: 800px;
    height: 600px;
    border: 1px solid red;
    align-content: center;
    justify-content: space-between;
}
.column {
    border: 1px solid black;
    background-color: antiquewhite;
}

有空多多琢磨吧。