community/knowledge-base/css-grid

CSS Grid 是一种用于在网页上创建复杂布局的强大工具。它允许开发者以二维的方式排列元素，类似于在纸上布局设计。

基本概念

• 容器 (Container): 使用 display: grid; 声明的元素。
• 项目 (Item): 容器中的任何子元素。

常用属性

• grid-template-columns: 定义网格的列。
• grid-template-rows: 定义网格的行。
• grid-gap: 定义网格项之间的间隙。

实例

假设我们要创建一个两列一行的网格布局：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

学习资源

想要深入了解 CSS Grid？可以阅读我们的CSS Grid 教程。

图片示例

CSS Grid 示例