CSS Grid 布局
CSS Grid Layout Module Level 2
不同于flex布局，grid布局提供基于网格的布局系统，具有行和列。它同样使设计网页变得更容易，而无需使用浮动和定位。
基本使用
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
...
</div>
.container {
display: grid;
/* repeat(重复次数, 重复值) */
/* 等效于 1fr 1fr 1fr */
grid-template-columns: repeat(3, 1fr);
/* 用单位 fr 来定义网格轨道大小的弹性系数，按比例分配剩余的可用空间 */
/* 以上代码表示三列等宽 */
/* 以下代码第一列占1，第二列占2，第三列占3；相当于一行分成6等宽，第一列占1，第二列占2，第三列占3 */
/* grid-template-columns: 1fr 2fr 3fr; */
/* 还有 min-content、max-content、fit-content 等值，参见：https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-template-columns */
/* 每行所占高度 */
grid-template-rows: repeat(4, 50px);
/* 单元格间距 */
/* 可缩写为：grid-gap: 10px; */
/* 行间隔 */
grid-row-gap: 10px;
/* 列间隔 */
grid-column-gap: 10px;
}
.item {
border: 1px solid #ddd;
}
自动换行
.container {
display: grid;
/* 每列100px宽 自适应填充容器 自动换行 */
grid-template-columns: repeat(auto-fill, 100px);
}
自动填充
.container {
display: grid;
/* 第一、三列100px宽 第二列自适应 */
grid-template-columns: 100px auto 100px;
}
最大最小值
.container {
display: grid;
/* 第一列100px宽 第二列最小100px宽最大200px宽 第三列最小100px宽 */
grid-template-columns: 100px minmax(100px, 200px) minmax(100px, auto);
}
place-items & justify-items & align-items
place-items是后两者的简写，空格分隔。适用于子元素。
适用于flexbox和grid布局中。justify-items水平布局，align-items垂直位置。在grid中，两个默认值都是stretch。
place-content & justify-content & align-content
place-content 属性是align-content 和 justify-content的简写。使用这两个属性的值可以用于任何的布局情况。
容器内所有元素的位置，适用于容器。
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-row-gap: 10px;
grid-column-gap: 10px;
border: 1px solid blueviolet;
height: 250px;
justify-content: center;
align-content: center;
}
网格区块
grid-template-areas配合grid-template-columns，grid-template-rows，grid-area实现布局。
<div class="container">
<header class="header">Header</header>
<nav class="nav">Navigation</nav>
<main class="content">Content</main>
<footer class="footer">Footer</footer>
</div>
.container {
display: grid;
height: 650px;
/* 两列布局：导航栏宽200px 内容自适应 */
grid-template-columns: 200px auto;
/* 三行布局：头部100opx高 中间自适应 尾部50px高 */
grid-template-rows: 100px auto 50px;
/* 布局 */
grid-template-areas:
"header header"
"nav content"
"footer footer";
}
/* 基线命名 */
/* https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-area */
.container > .header {
grid-area: header;
background: #78C1F3;
}
.container > .nav {
grid-area: nav;
background: #9BE8D8;
}
.container > .content {
grid-area: content;
background: #E2F6CA;
}
.container > .footer {
grid-area: footer;
background: #F8FDCF;
}
grid-auto-columns & grid-auto-rows
自动创建的多余网格的列宽和行高。比如：
.container {
display: grid;
grid-template-columns: 100px 100px 1fr;
/* 指定列2行的高度为50px */
grid-template-rows: repeat(2, 50px);
/* 其它行高度将为100px */
grid-auto-rows: 100px;
}
grid-auto-flow
控制着自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。属性有：row、column、dense、row dense以及column dense。
不设置就是先行后列（即默认值row），如上图[图6-1]所示；逐行填充来排列元素，在必要时增加新行。
grid-auto-flow: column;：先列后行，即纵向排列，逐列填充来排列元素，在必要时增加新列，如下图所示。
grid-auto-flow: dense;：使用一种“稠密”堆积算法，如果后面出现了较小的元素，会试图填充网格中留下的空白。会填上较大元素留下的空白，但同时也可能会使次序打乱。
grid-column & grid-row
作用于子元素上。grid-column CSS 属性是 grid-column-start 和 grid-column-end 的简写属性，用于指定网格项目的大小和位置。grid-row也是类似。
简写用/分隔start和end。
.item:nth-child(1) {
/* 单元格合并2列 */
grid-column-start: span 2;
}
.item:nth-child(1) {
/* 单元格从第二列开始 第三列结束 */
grid-column-start: 2;
grid-column-end: 4;
/* -1 表示最后分割线 */
/* grid-column-end: -1; */
/* 可以超出 grid-template-columns */
/* grid-column-start: -1; 会出现第一个单元格从第四列开始 */
}
.item:nth-child(1) {
grid-row-start: span 2;
}
The End. Last Updated by Jimmy Gu, 15 Aug, 2023.