CSS网格布局学习(5)

作者: 贪恋冬天的幸福 | 来源:发表于2020-07-21 20:52 被阅读0次

布局
九宫格拖拽
九宫格拖拽
CSS网格布局学习(5)
CSS Grid网格布局
CSS Grid 网格布局
CSS Grid
CSS布局
Grid布局指南
Grid布局（一）介绍

CSS网格布局对部分未使用定位属性的元素，使用自动定位规则布局。同时，使用定位属性的元素也可以利用自动定位功能。例如我们定义 grid-column-end 和 grid-row-end 属性设置为 span 2，而不设置项目的开始线，这意味着开始线是由自动定位规则确定的，结束线跨越两条轨道。代码示例：

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <style>
        .wrapper {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-auto-rows: 100px;
            grid-gap: 10px;
        }

        .wrapper div:nth-child(4n+1) {
            grid-column-end: span 2;
            grid-row-end: span 2;
            background-color: #ffa94d;
        }

        .wrapper div:nth-child(2) {
            grid-column: 3;
            grid-row: 2 / 4;
        }

        .wrapper div:nth-child(5) {
            grid-column: 1 / 3;
            grid-row: 1 / 3;
        }
        
        .wrapper div {
            background-color: turquoise;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
        <div>Four</div>
        <div>Five</div>
        <div>Six</div>
        <div>Seven</div>
        <div>Eight</div>
        <div>Nine</div>
        <div>Ten</div>
        <div>Eleven</div>
        <div>Twelve</div>
    </div>
</body>

</html>

布局效果：

如上我们可以看到未明确定位过的项目，会按照它们在DOM中的顺序被网格自动处理，同时也出现很多缺口，如果要布局的项目顺序并不重要，可以创建一种没有缺口的布局，这种效果通过将 grid-auto-flow 属性值中加入 dense 关键字实现。代码示例：

.wrapper {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-auto-rows: 100px;
            grid-gap: 10px;
            grid-auto-flow: dense;
        }

布局效果：