CSS网格布局学习(4)
2020-07-21 本文已影响0人
贪恋冬天的幸福
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>
布局效果：
