CSS网格布局学习(4)

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

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

CSS网格布局概念：
基线 与 网格区域
在3*3的网格中，在列的方向上和行的方向上分别有4条基线，在网格布局中，可以为这些基线命名，使用方括号[]，代码如下：

.wrapper {
            display: grid;
            grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
            grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
        }

并且一条基线可以取多个名字，以空格分隔，在引用时可使用任一名字。
列方向上的 [content-start]、[content-end] 与行方向上的 [content-start]、[content-end] 组成了一个 网格区域。并且如果一个 网格区域 周围的线都用 -start 和 -end 作为后缀命名，则网格就会为此区域隐式创建一个名字。同样，显示地为网格区域命名，也会自动生成隐式的被命名的基线，以 -start 和 -end 命名。例如：grid-row: foo，即表示 grid-row-start: foo-start；grid-row-end: foo-end。
因为隐式存在一个网格区域content，因此可以在content中放入一个项目，示例：

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <style>
        .wrapper {
            display: grid;
            grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
            grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
        }

        .thing {
            grid-area: content;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="thing">I am placed in an area named content.</div>
    </div>
</body>

</html>

布局效果：