- Objective:
- Breadcrumb: CSS 排版
# 概念阐释
Grid是一种二维布局方式，从两个维度（横向和纵向）将元素排列整齐。
```css
display:grid;
gap: 网格之间的间距
grid-template-columns: repeat(num,minmax(0,fr))/*数字定义了网格的列，minmax的意思是每列的宽度可以在在0与多少分数单位之间变化*/
```
# 实例
```css
.list-cards div > ul {
display: grid;/*将选定的 ul 元素的显示类型设置为网格（grid），用于创建一个网格布局。*/
gap: 8px;/*在网格项之间设置 8 像素的间距。*/
grid-template-columns: repeat(3, minmax(0, 1fr));/*定义了两列的网格布局。每列的宽度可以在 0 和 1fr（fraction unit，分数单位）之间变化。`repeat(2, minmax(0, 1fr))` 使两列具有相同的宽度。*/
}
/* 第一个li变成了一个个的卡片 */
.list-cards div > ul > li {
display: flex;/*将选定的 li 元素的显示类型设置为弹性盒子（flexbox），用于创建一个弹性盒子布局。相当于flex-container*/
}
.list-cards div > ul > li:has(ul) {/*如果li下有ul*/
flex-direction: column;/*将弹性盒子的主轴设置为垂直方向。相当于flex item*/
}
```
# 相关内容
[[CSS Flexbox]]是一维布局方式，设计横向或者纵向的布局。
#### 网格高度
```css
/* 为每一行设置明确的高度 */
.grid-container {
display: grid;
grid-template-rows: 100px 200px 300px;
}
/* 为三行设置相同的高度 */
.grid-container {
display: grid;
grid-template-rows: repeat(3, 100px);
}
/*自动创建的行，而不是固定好多少行，自动设定高度*/
.grid-container {
display: grid;
grid-auto-rows: 100px;
}
/*用fr设定不同行的倍数*/
.grid-container {
display: grid;
grid-template-rows: 1fr 2fr 1fr;
}
/*`minmax` 函数允许你为每行设置一个最小和最大高度。这可以确保行的高度在一个特定的范围内，而不会变得太大或太小。*/
.grid-container {
display: grid;
grid-template-rows: minmax(100px, 200px) minmax(150px, 300px);
}
```
# 参考资料
[CSS布局介绍-MDN](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Introduction#%E6%80%BB%E7%BB%93)