CSS Grid - 快速实验网站

页面布局

以前制作网站布局很困难……框架、表格、浮动、display: table、vertical-align、负外边距、绝对定位……应有尽有！人们和框架不得不滥用 HTML/CSS 功能，仅仅是为了居中一个 div（更不用说响应式页面设置）……幸运的是，黑暗时代已经结束了，Flexbox 已经支持了很长一段时间，大约两年前，主流浏览器实现了 Grid。虽然花了 30 年，但网站布局问题（几乎）已经解决（仍然在等待 Subgrid）。

如果您还没有听说过 CSS Grid，这里有一些很棒的资源

• https://mdn.org.cn/en-US/docs/Learn/CSS/CSS_layout/Grids
• https://css-tricks.cn/snippets/css/complete-guide-grid
• https://learncssgrid.com
• https://w3schools.org.cn/css/css_grid.asp
• https://cssgrid.io

快速实验

以上网站（以及无数其他网站）都很好地描述了 Grid 的功能，所以我在这里就不再赘述了。相反，我将分享一个我在学习 Grid 时创建的页面：https://morzel85.github.io/css-grid-playground （哎呀，我刚才注意到 https://www.cssgridplayground.com 已经存在了，更多的 Playground 岂不是更好？）

我的网站不是一个 Grid 生成器，而是一个可以让你快速测试各种 CSS Grid 属性效果的地方。尝试修改属性并立即看到结果（您可能还想打开浏览器的开发者工具，查看样式是如何实际应用到容器和项目的）……如果您迷路了，请不用担心，只需重新加载页面即可恢复到初始状态。

这是网站的样子

在左侧，您可以控制 Grid 容器（带有 grid-container 类的 div）的属性。中间，您可以设置 Grid 项目的数量（带有 grid-item 类的 div）并查看生成的 Grid。如果您点击一个项目，会弹出一个额外的面板，您可以在其中控制特定 Grid 项目的属性。如果您不确定某个属性的作用，将其悬停在上面可以看到简短的描述和示例值。

我在 Chrome 75、Firefox 68 和 Edge 44 中测试了该页面。

支持的属性

CSS Grid 非常复杂，但如果认为我的工具能相当好地展示其 most important features。以下是支持的属性

• grid-template-rows

  定义显式 Grid 行的数量和大小。

• grid-template-columns

  定义显式 Grid 列的数量和大小。

• grid-auto-Rows

  定义隐式 Grid 行的大小。当项目数量超过显式行数量（由模板定义的行）或项目放置超出显式行范围时，将创建隐式行。

• grid-template-areas

  定义命名的 Grid 区域，这些区域可以通过放置属性与特定的 Grid 项目关联：grid-row-start、grid-row-end、grid-column-start、grid-column-end（或它们的简写：grid-row、grid-column 和 grid-area）。每行的区域用引号括起来，可以添加空格以提高可读性。

• grid-auto-columns

  定义隐式 Grid 列的大小。当项目数量超过显式列数量（由模板定义的列）或项目放置超出显式列范围时，将创建隐式列。

• grid-auto-flow

  定义未被显式定位（例如，使用 grid-column 或 grid-area）的项目放置算法。

• row-gap

  定义 Grid 行之间的间隙（gutter）大小。旧的实现使用了 grid-row-gap 名称。gap 简写属性可以同时用于指定行和列的间隙。

• column-gap

  定义 Grid 列之间的间隙（gutter）大小。旧的实现使用了 grid-column-gap 名称。gap 简写属性可以同时用于指定行和列的间隙。

• justify-items

  在 Grid 单元格中沿行内（主）轴（水平方向，垂直书写模式除外）放置项目。在容器上设置的值可以被项目上的 justify-self 覆盖。place-items 简写属性可以同时用于指定对齐和 justify。

• align-items

  在 Grid 单元格中沿块（交叉）轴（垂直方向，垂直书写模式除外）放置项目。在容器上设置的值可以被项目上的 aling-self 覆盖。place-items 简写属性可以同时用于指定对齐和 justify。

• justify-content

  在 Grid 单元格沿行内（主）轴（水平方向，垂直书写模式除外）放置。如果行内轴上没有剩余空间（例如，当某列定义为 1fr 时！），此设置将不起作用。place-content 简写属性可以同时用于指定对齐和 justify。

• align-content

  在 Grid 单元格沿块（交叉）轴（垂直方向，垂直书写模式除外）放置。如果块轴上没有剩余空间（例如，当某行定义为 1fr 时），此设置将不起作用。place-content 简写属性可以同时用于指定对齐和 justify。

• grid-row

  一个简写属性，通过分别设置 grid-row-start 和 grid-row-end 的值来控制项目行的放置。如果放置超出了显式定义的 Grid 行，将创建隐式行。

• grid-column

  一个简写属性，通过分别设置 grid-column-start 和 grid-column-end 的值来控制项目的列放置。如果放置超出了显式定义的 Grid 列，将创建隐式列。

• grid-area

  一个简写属性，通过分别设置 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 的值来控制项目的放置。当使用 grid-template-areas 的“ascii-art”形式时，此设置尤其有用。如果放置超出了显式定义的 Grid，将创建隐式行或列。

• justify-self

  在 Grid 单元格内沿行内（主）轴（水平方向，垂直书写模式除外）放置项目。此设置优先于在容器上设置的 justify-items。

• align-self

  在 Grid 单元格内沿块（交叉）轴（垂直方向，垂直书写模式除外）放置项目。此设置优先于在容器上设置的 align-items。

• order

  允许重新排序自动放置的项目。默认情况下，项目的 order 为 0。order 值越高，项目出现得越晚。如果其他项目具有默认 order，将其设置为 1 会将项目移到末尾，将其设置为 -1 会将项目移到开头。

历史

• 2019年8月4日：初始版本