CSS Grid 教程

CSS Grid 是一种用于在网页上创建复杂布局的强大工具。本教程将带您入门，了解如何使用 CSS Grid 创建响应式和灵活的布局。

基础概念

• 容器（Container）：使用 display: grid; 或 display: grid-template-columns; 和 display: grid-template-rows; 属性创建的元素。
• 项目（Item）：Grid 容器内的元素。
• 网格线（Grid Line）：定义网格的行和列。
• 网格单元格（Grid Cell）：由四条边界的网格线围成的区域。

创建 Grid 布局

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
}

网格项定位

使用 grid-column 和 grid-row 属性来定位网格项。

.item1 {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

网格间隙

使用 grid-gap 属性来设置网格项之间的间隙。

.container {
  grid-gap: 10px;
}

响应式布局

使用 grid-template-columns 的 fr 单位来实现响应式布局。

.container {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

附加资源

想了解更多关于 CSS Grid 的内容，可以访问本站 CSS Grid 深入教程。

[

CSS Grid