今日围绕 CSS 展开了深入学习，比如CSS网格布局（Grid Layout）学习，分为网格容器属性深化和网格项属性运用。
- 网格容器属性深化
grid-template-columns 和 grid-template-rows：进一步理解了这两个属性用于精确定义网格的列和行的大小。学习了使用分数单位 fr 来灵活分配空间，例如 grid-template-columns: 1fr 2fr 1fr 可以将容器宽度按 1:2:1 的比例分配给三列。还掌握了使用 repeat() 函数简化重复列或行的定义，如 grid-template-columns: repeat(3, 1fr) 等同于定义三列，每列宽度为容器宽度的三分之一。
grid-template-areas：学会了使用该属性创建网格区域模板。通过为不同的网格区域命名，然后在模板中进行布局，能更直观地控制元素的位置。例如：
css
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
grid-template-areas:
"header header"
"sidebar content";
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
gap 属性：了解了 gap 属性用于设置网格项之间的间距，它是 row-gap 和 column-gap 的简写形式。可以同时设置行间距和列间距，如 gap: 20px 表示行间距和列间距均为 20 像素，也可以分别设置，如 row-gap: 10px; column-gap: 15px。
2. 网格项属性运用
grid-column 和 grid-row：掌握了使用这两个属性精确指定网格项跨越的列和行。可以使用网格线编号来确定起始和结束位置，例如 grid-column: 1 / 3 表示该网格项从第 1 条列网格线开始，到第 3 条列网格线结束，跨越两列。还学习了使用 span 关键字，如 grid-column: span 2 表示该网格项跨越两列。
place-self：学会了使用 place-self 属性同时设置网格项的水平和垂直对齐方式。它是 align-self 和 justify-self 的简写形式，例如 place-self: center 可以使网格项在其所在的网格区域内水平和垂直居中。
