网格布局的基本概念

我们通过在元素上声明 display：grid 或 display：inline-grid 来创建一个网格容器。一旦我们这样做，这个元素的所有直系子元素将成为网格元素。

在这个例子中，这有一个类名为 wrapper 的div 元素作为容器，它内部有五个子元素。

html

我将 .wrapper 作为一个网格容器。

css

所有直系子元素现在都是网格项了。在浏览器中，元素转为网格前看不出什么差异，因为网格给这些元素创建了一个单列网格。此刻，Firefox 开发人员版（Developer Edition）可能会助你一臂之力。网格检查器（Grid Inspector (en-US)）为其开发工具的一部分。如果你在 Firefox 中查看此示例并检查网格，则会在值 grid 旁边看到一个小图标。单击此图标后，此元素上的网格会覆盖在浏览器窗口中。

当你学习并且使用 CSS 网格布局时，这个工具能让你更好地了解到你的网格在视觉上发生了哪些变化。

如果我们想让这个例子更加“网格化”，我们需要使用列轨道。