Day15 CSS-grid布局

• 与flex布局的区别：flex 布局是仅从横向上进行布局，是一维布局，而 grid 布局属于是二维布局，是一种网格布局。

display: grid;
display: inline-grid;
// 设置grid布局以后，子元素的float、inline-block、table-cell都将失效

grid布局容器属性

grid-template-rows: 第一行 第二行 第三行; // 定义每一行的行高
grid-template-columns: 第一列 第二列 第三列; // 定义每一列的列宽
column-gap: 10px; // 列间距
row-gap: 10px; // 行间距

grid-template-areas: ; 设置分区

.contener {
    display: grid;
    grid-template-columns: repeat(3, 1fr); // 1
    grid-template-rows: repeat(3, 1fr);    // 2
    grid-template-areas: // 假设有三行三列   // 3
        "a1 a1 a1"
        "a2 a2 a2"
        "a3 a3 a3";
}
​
// 如果用 . 来替代其中的a1 a2 a3 那么这块区域就不属于任何一个标签
​
/*
上面的 1 2 3 行代码也可以写成：
    grid-template: 
        "a1 a1 a1" 1fr
        "a2 a2 a2" 1fr
        "a3 a3 a3" 1fr
        /1fr 1fr 1fr;
*/
​
.item:nth-child(1) {
    grid-area: a1;
}
​
.item:nth-child(2) {
    grid-area: a2;
}
​
.item:nth-child(3) {
    grid-area: a3;
}
// 此时，就会呈现三排格式的布局了

grid-auto-flow: 默认为row,可改为column; // 具体表现为先行后列还是先列后行
grid-auto-flow: row dense; // 设置dense，项目按顺序填满

justify-items: ; 设置单元格内容的水平位置（左中右）

justify-items: start; // 左对齐
justify-items: center; // 居中
justify-items: end; // 右对齐
justify-items: stretch; // 拉伸对齐

align-items: ; 设置单元格内容的垂直位置（上中下）

align-items: start; // 上对齐
align-items: center; // 居中
align-items: end; // 下对齐
align-items: stretch; // 拉伸对齐

place-items: ; 是以上两种属性的合并简写形式

place-items: end start; // 前：垂直方向对齐 后：水平方向对齐

justify-content: ; 整个内容区域在容器里面的水平位置（左中右）

align-content: ; 整个内容区域在容器里面的垂直位置（上中下）

place-content: ; 前两者的合并简写形式

grid容器的项目属性

grid-column-start: ; // 设置项目纵向开始线

grid-column-end: ; // 设置项目纵向结束线

grid-row-start: ; // 设置项目横向开始线

grid-row-end: ; // 设置项目横向结束线

grid-area: 1 / 2 / 3 / 4; // 包含了上面4个

justify-self: ; // 和justify-items效果相同，只是操控单个单元格

aligh-self: ; // 同上

place-self: ; // 同上