CSS 3 网格布局

CSS 网格可以像表格一样，让我们可以按照行或列来对其元素，而且网格更强大更简单。

把当前容器转化为网格容器

<style>
    .d1{
        background:LightSkyBlue;
    }
    .d2{
        background:LightSalmon;
    }
    .d3{
        background:PaleTurquoise;
    }
    .d4{
        background:LightPink;
    }
    .d5{
        background:PaleGreen;
    }
    
    .container {
        /* 把容器转化为网格布局 */
        display: grid;
    }
</style>
<div class="container">
    <div class="d1">1</div>
    <div class="d2">2</div>
    <div class="d3">3</div>
    <div class="d4">4</div>
    <div class="d5">5</div>
</div>

---效果图---

添加列、行

简单的添加一个网格元素并不会有很大的区别，还需要明确网格的结构

/*修改容器的样式添加行、列*/
.container {
    /* 设置网格的列数以及每列的宽度 */
    grid-template-columns: 100px 100px 100px;
    /* 设置网格的行数以及每行的高度 */
    grid-template-rows: 50px 50px;
}

---效果图---

fr单位

fr 是网格独有的单位，用于设置列或行占剩余空间的比例

    .container {
        grid-template-column: 1fr 100px 2fr;
    }

---效果图---

在这个示例中， 1fr = 容器宽度 - 100px / 3 , 2fr = 2 * 1fr

行列边距

.container {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;

    /* 列间距 */
    grid-column-gap: 20px;
    /* 行间距 */
    grid-row-gap: 5px;
}

/*****或****/

.container{
    /* 这是一个复合属性 第一个是行间距 第二个行间距 */
    grid-gap: 5px 20px;
}

---效果图---

控制项的位置

.d5 {
    /* 设置项的开始列与结束列 */
    grid-column: 2 / 4;
    /* 设置项的开始行于结束行 */
    frid-row: 2 / 4;
}

---效果图---

项的水平对齐

/* justify-self: flex-start|flex-end|center */
.d2{
    justify-self: center;
}

---效果图---

项的垂直对齐

/* align-self: flex-start|flex-end|center */
.d2{
    align-self: end;
}

---效果图---

设置所有项水平对齐

/* justify-items: flex-start|flex-end|center */
.container{
    justify-items: center;
}

---效果图---

设置所有项垂直对齐

/* align-item: flex-start|flex-end|center */
.container{
    align-items: end;
}

---效果图---

划分区域模板

.constainer {
    /* 区域可以用`.`代表空单元格 */ 
    grid-template-areas: 
        "header header header"
        "advert content content"
        "footer footer footer";
}

.d5 {
    grid-area: footer;
}

---效果图---

/*如果没有指定模板， 可以使用grid-area指定*/
/* grid-area: 起始水平线 / 起始垂直线 / 末尾水平线 / 终止垂直线  */
.d5 {
    grid-area: 3 / 1 / 4 / 4;
}

同上面效果相同

消除重复行列

在定义网格格式时，如果单元格过多，这时使用repeat就是一个明智的选择。这里我们把上面定义行列的语句优化一下

.constainer {
    /* 重复定义3个宽度为1fr的列 */
    grid-template-columns: repeat(3, 1fr);
    /* 行同理 */
    grid-template-rows: repeat(3, 1fr);
}

限制行列的最大值于最小值

.constainer {
    /* 最小为90px 最大为1fr */
    grid-template-columns: repeat(3, minmax(90px, 1fr));
}

弹性布局

通过auto-fill来实现自动填充，他会根据容器的大小，自动填充指定的列数和行数。

auto-fit与auto-fill类似，不过会将容器填充满

.constainer {
    /* 最小为90px 最大为1fr */
    grid-template-columns: repeat(repeat(auto-fill, minmax(60px, 1fr)), minmax(90px, 1fr));
}
.constainer2 {
    /* 最小为90px 最大为1fr */
    grid-template-columns: repeat(repeat(auto-fit, minmax(60px, 1fr)), minmax(90px, 1fr));
}

---效果图---

以上内容均借鉴于freeCodeCamp，有兴趣的小伙伴可以去尝试一下[]~(￣▽￣)~*