Grid 网格布局
Grid 网格布局
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div class="grid">
<div class="item hd">header</div>
<div class="item sd">sider</div>
<div class="item bd">body</div>
<div class="item ft">footer</div>
</div>
</body>
</html>
.item {
background: orange;
padding: 20px;
}
.hd {
grid-area: hd;
}
.sd {
grid-area: sd;
}
.bd {
grid-area: bd;
}
.ft {
grid-area: ft;
}
.grid {
display: grid;
grid:
"hd hd hd" minmax(200px, auto)
"sd bd bd" minmax(60vh, auto)
"sd . ft" minmax(200px, auto)
/ 1fr 1fr 1fr;
grid-gap: 10px 20px;
}
- 属性
- grid（网格容器布局）
- grid-template
- grid-template-columns（网格容器轨道列，可使用弹性单位 fr）和 grid-template-rows（网格容器轨道行）
1fr 1fr 1fr500px 1fr 2frrepeat(3, 1fr)repeat(5, 1fr 2fr)20px repeat(6, 1fr) 20pxrepeat(auto-fill, 200px)repeat(auto-fill, minmax(200px, 1fr))[main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end]repeat(12, [col-start] 1fr)
- grid-template-areas（网格区域布局，多个网格单元 grid-area 组成）
- grid-template-columns（网格容器轨道列，可使用弹性单位 fr）和 grid-template-rows（网格容器轨道行）
- grid-auto-columns / grid-auto-rows（轨道大小）
minmax(100px, auto)100px 200px
- grid-auto-flow
- grid-template
- grid-gap（网格空器子项的间距）
- 缩写
1em 10px
- 缩写
- grid-column / grid-row / grid-area
- grid-column-start 和 grid-column-end（网格单元线定位，命名线和线序号可混合使用）
1( / 2)1 / 21 / span 3span 3 / 41 / -1main-start / 21 / main-endcol-start / col-start 5
- grid-area（网格单元区域定位）
- 上右下左：
1 / 1 / 4 / 2 - 自定义命名如：hd ft bd
- 上右下左：
- grid-column-start 和 grid-column-end（网格单元线定位，命名线和线序号可混合使用）
- grid（网格容器布局）
- 网格：显示和隐式，显示是用 grid-template-columns 和 grid-template-rows 创建的行和列；隐式就是在网格定义之外又放了一些东西，让网格按所需的内容创建行，这些行会被创建在隐式网格中。
- 网格线：当我们定义网格时，我们定义的是网格轨道，而不是网格线，但会创建网格线编号来定位每一个网格元素。如果把一个网格区域周围的线都用 -start 和 -end 作为后缀，网格容器就会为网格区域创建一个名字，如 content-start 和 content-end 创建一个 content，反之亦然。
- 1 2 3
- -3 -2 -1
- 网格单元（最小单位）、网格区域（多个网格单元合并的矩形）、嵌套网格（display contents）、网格容器
- 轨道：一个网格轨道就是网格中任意两条线之间的空间。
- 轨道可弹性：固定宽度和新单位 fr
- 定位可命名：使用行号、行名或区域名
- 内容可对齐（盒模型）：网格容器 align-items、justify-content，网格单元的 align-self
- 层级可控制：z-index
- 网格容器或网格区域可设置 relative，网格单元或网格单元内元素绝对定位
- 与 Flexbox 的区别：Flex 是一维（只控制行或列），Grid 是二维（同时控制行和列）
- 自动定位？还没完全理解
- 常见布局有哪些？1-3 列灵活布局、12 列灵活布局
Leave a comment