Grid 总结篇 | 每天学一点Grid

“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 13 天，点击查看活动详情

Grid 布局实战案例

至此，我们整个 Grid 布局的容器属性和项目属性已经大致给大家介绍完毕。接下来，我们来使用 Grid 布局完成文章开头的这么一个布局结构。

html 代码如下：

<body>
    <div class="wrapper">
        <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>
</body>

css 代码如下：

* {
    margin: 0;
    padding: 0;
}

.wrapper {
    width: 800px;
    height: 500px;
    border: 1px solid;
    margin: 50px auto;
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 20px;
}

.wrapper div {
    color: #fff;
    padding: 10px;
    font-size: 22px;
}

.item1 {
    background-color: #ae3735;
    grid-row: 1/3;
    grid-column: 1/3;
}

.item2 {
    background-color: #3aa8a5;
}

.item3 {
    background-color: #36997c;
    grid-row: 3/4;
    grid-column: 1/2;
}

.item4 {
    background-color: #6a4a8d;
    grid-row-start: span 2;
}

.item5 {
    background-color: #d87035;
}

效果如下：

总结

网格布局（Grid）将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。
采用网格布局的区域，称为“容器”（container）。容器内部采用网格定位的子元素，称为“项目”（item）。
行和列的交叉区域，称为“单元格”（cell）。
划分网格的线，称为“网格线”（grid line）。水平网格线划分出行，垂直网格线划分出列。
Grid 布局的属性分成两类。一类定义在容器上面，称为容器属性。另一类定义在项目上面，称为项目属性。
grid-template-columns 属性定义每一列的列宽，grid-template-rows 属性定义每一行的行高。
row-gap 属性设置行与行的间隔，column-gap 属性设置列与列的间隔。
网格布局允许指定“区域”（area），一个区域由单个或多个单元格组成。grid-template-areas 属性用于定义区域。
grid-auto-flow 属性决定容器的子元素的排列顺序。
justify-items 属性设置单元格内容的水平位置，align-items 属性设置单元格内容的垂直位置。
justify-content 属性是整个内容区域在容器里面的水平位置，align-content 属性是整个内容区域的垂直位置。
grid-auto-columns 属性和 grid-auto-rows 属性用来设置浏览器自动生成的多余网格。
grid-column-start、grid-column-end、grid-row-start、grid-row-end 属性用于指定项目的四个边框，分别定位在哪根网格线。
grid-column 属性是 grid-column-start 和 grid-column-end 的合并简写形式，grid-row 属性是 grid-row-start 属性和 grid-row-end 的合并简写形式。
grid-area 属性用于指定项目放在哪一个区域。
justify-self 属性设置单元格内容的水平位置，跟 justify-items 属性的用法完全一致，但只作用于单个项目。align-self 属性也和 align-items 属性的用法完全一致。