♦  grid

◆ 每列高度相等

align-items: stretch;高度由【内容最多的列】所决定。其他列【自动对齐】高度。

♦  css变量

css变量是一种允许你在文档中存储值，然后在需要的地方复用这些值的机制。格式：以字符（–）开头，比如–wp–style–root–padding-top 就是一个自定义属性名。

body {
    --wp--style--root--padding-top: 0;
    --wp--style--root--padding-right: 2rem;
    --wp--style--root--padding-bottom: 0;
    --wp--style--root--padding-left: 2rem;
}

此选择器表明这些自定义属性是在body元素的作用域内定义的。这意味着这些属性仅在body元素及其后代元素中可用。

◆ 使用变量

body {
    padding-top: var(--wp--style--root--padding-top);
    padding-right: var(--wp--style--root--padding-right);
    padding-bottom: var(--wp--style--root--padding-bottom);
    padding-left: var(--wp--style--root--padding-left);
}

◆ 定义网站容器的网格布局

.site {
    display: grid;
    grid-template-columns: auto 200px;
    grid-template-areas:
        "header header"
        "main sidebar"
        "footer footer";
    gap: 10px;
    padding: 10px;
}

在第一行 “header header” 里，两个 “header” 表示这一行的两列都属于 “header” 区域。这就如同在表格布局里把这两列合并成了一个大的单元格，也就是让头部区域横跨了两列。

grid-template-columns 属性用于确定每列的宽度。第一列宽度自动调整，第二列宽度固定为 200px。【”main sidebar”】的意思是：即便头部区域横跨了这两列，这两列的宽度依然遵循 grid-template-columns 的设定。

等比例且严格按比例分配

repeat(2, minmax(0, 1fr)) 2列等比例

repeat(3, minmax(0, 1fr)) 3列等比例

多列不等比例，且严格按比例分配，不受内容影响

2 列不等比例（2:1）

grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); 
/* 第一列占2份，第二列占1份，均不受内容影响 */

3 列不等比例（3:2:1）：

grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 1fr);

和grid-template-columns: 1fr 1fr 写法区别

希望列宽严格等宽，不受内容影响（即使内容溢出）：用 repeat(2, minmax(0, 1fr))。
希望列宽在内容不溢出时等宽，溢出时自动适应内容（允许列宽不等）：用 1fr 1fr。