Grid 布局：超越 Flex 的二维布局世界

网格布局与 Flex 布局

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。

Grid 布局远比 Flex 布局强大。它允许你：

• 创建更复杂的布局
• 更好地控制项目的排列方式
• 更轻松地创建响应式布局

Grid 布局的属性

Grid 布局的属性分成两类。一类定义在容器上面，另一类定义在项目上面。

容器属性

• display：此属性指定元素的显示类型。对于 Grid 布局，你需要将其设置为 grid。
• grid-template-columns：此属性定义容器的列。你可以指定列的宽度、数量和间距。
• grid-template-rows：此属性定义容器的行。你可以指定行的高度、数量和间距。
• grid-gap：此属性定义容器中元素之间的间距。

项目属性

• grid-column-start：此属性指定项目在容器中从哪一列开始。
• grid-column-end：此属性指定项目在容器中到哪一列结束。
• grid-row-start：此属性指定项目在容器中从哪一行开始。
• grid-row-end：此属性指定项目在容器中到哪一行结束。

Grid 布局的语法

Grid 布局的语法非常简单。下面是一个例子：

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

.item {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
}

在这个例子中，.container 是一个 Grid 容器，它被分为三列三行，每列和每行的间距都是 10px。.item 是一个 Grid 项目，它位于第一列第一行，跨越两列两行。

Grid 布局的用法

Grid 布局可以用来创建各种各样的布局。以下是一些常见的用例：

• 创建响应式布局：Grid 布局非常适合创建响应式布局，因为它允许你轻松地控制项目的排列方式。
• 创建网格系统：Grid 布局可以用来创建网格系统，这是一种常见的布局方式，可以帮助你将内容组织成更易读的形式。
• 创建复杂布局：Grid 布局可以用来创建复杂的布局，例如带有侧边栏的布局、带有页眉和页脚的布局等等。

浏览器兼容性

Grid 布局得到了所有现代浏览器的支持，包括 Chrome、Firefox、Safari、Edge 和 Opera。然而，在 IE11 和更早版本的浏览器中，Grid 布局并不受支持。

结论

Grid 布局是 CSS 中一个强大的工具，它允许你创建各种各样的布局。它非常适合创建响应式布局、网格系统和复杂布局。Grid 布局得到了所有现代浏览器的支持，但 IE11 和更早版本的浏览器中不支持。