CSS Grid Level 2 教程

1. 简介

CSS Grid Level 2 是 CSS Grid 布局的扩展，引入了一些新的功能和改进，使得网页布局更加灵活和强大。本教程将带你深入了解 CSS Grid Level 2 的新特性，并通过理论解释、代码示例和实践练习帮助你掌握这些新功能。

2. CSS Grid Level 2 的新特性

2.1 Subgrid

subgrid 是 CSS Grid Level 2 中最重要的新特性之一。它允许子网格继承父网格的行和列，从而实现更复杂的布局。

2.1.1 理论解释

在传统的 CSS Grid 中，子元素的网格是独立的，无法与父元素的网格对齐。而 subgrid 允许子元素的网格直接继承父元素的网格结构，使得子元素的网格线与父元素的网格线对齐。

2.1.2 代码示例

<div class="parent">
  <div class="child">
    <div class="grandchild">1</div>
    <div class="grandchild">2</div>
    <div class="grandchild">3</div>
  </div>
</div>

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
}

.child {
  display: grid;
  grid-column: 2 / 4;
  grid-row: 2 / 4;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  gap: 5px;
}

.grandchild {
  background-color: lightblue;
}

2.1.3 实践练习

尝试修改 grid-column 和 grid-row 的值，观察子网格如何继承父网格的结构。

2.2 Masonry Layout

masonry 布局是一种类似于砖石堆叠的布局方式，常用于图片墙或卡片布局。CSS Grid Level 2 引入了 masonry 布局，使得实现这种布局更加简单。

2.2.1 理论解释

masonry 布局通过将元素按列排列，并在列之间自动调整元素的高度，从而实现类似于砖石堆叠的效果。

2.2.2 代码示例

<div class="masonry">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
</div>

.masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry;
  gap: 10px;
}

.item {
  background-color: lightgreen;
  padding: 10px;
}

2.2.3 实践练习

尝试增加或减少 grid-template-columns 的列数，观察 masonry 布局如何自动调整元素的排列。

3. 总结

CSS Grid Level 2 引入了 subgrid 和 masonry 布局等新特性，使得网页布局更加灵活和强大。通过本教程的学习，你应该能够理解并应用这些新特性，提升你的网页布局能力。

4. 进一步学习

• 阅读 MDN 文档 了解更多关于 CSS Grid 的详细信息。
• 尝试在实际项目中应用 subgrid 和 masonry 布局，体验它们的强大功能。

希望本教程对你有所帮助，祝你在 CSS Grid Level 2 的学习中取得进步！