从零开始学习 grid 网格布局——再续集

这是我参与11月更文挑战的第12天，活动详情查看：2021最后一次更文挑战

显示网格和隐式网格

• grid-auto-flow grid-auto-rows grid-auto-columns：指定在显示网格之外的隐式网格，如何排列及尺寸大小

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

.main {
    width: 300px;
    height: 300px;
    background: skyblue;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px;
}
.main div {
    line-height: 100px;
    text-align: center;
    background: pink;
    border: 1px black solid;
    box-sizing: border-box;
}

因为 grid-template-columns 和 grid-template-rows 定义三列一行的布局，此时格子 1,2,3 刚好排列满，而 4,5 是未定义的，所以 1,2,3 是显示网格，4,5是隐式网格。默认：row 就是行产生隐式网格

设置 grid-auto-rows 属性可以调节产生隐式网格的高度

.main {
    grid-auto-flow: row; /* 默认：row 就是行产生隐式网格 */
    grid-auto-rows: 100px; /* 该属性可以调节产生隐式网格的高度 */
}

竖列隐式网格

.main {
    grid-template-columns: 100px;
    grid-template-rows: 100px 100px 100px;
}

因为默认是 row 行产生隐式网格，所以4和5都会排列在下面，如何改变的排列方向？使用 grid-auto-flow 改变。

.main {
    grid-auto-flow: column;
}

调整显示宽度

.main {
    grid-auto-columns: 100px;
}

基于线的元素位置

• grid-column-start grid-column-end grid-row-start grid-row-end：表示 grid 子项所占据的区域的起始和终止位置，包括水平方向和垂直方向

.main {
    width: 300px;
    height: 300px;
    background: skyblue;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}
.main div:nth-of-type(1) {
    line-height: 100px;
    text-align: center;
    background: pink;
    border: 1px black solid;
    box-sizing: border-box;
}

选择 Layout > 勾选 Grid overlays > 选择 Show line numbers，就可以看到线的排布啦！

设置格子位于第二列和第三列之间

.main div:nth-of-type(1) {
    grid-column-start: 2;
    grid-column-end: 3;
}

再设置格子位于第二行和第四行之间

.main div:nth-of-type(1) {
    grid-row-start: 2;
    grid-row-end: 4;
}