如何使用 CSS 网格？

可以通过在元素上声明 display: grid 或 display: inline-grid 来创建一个网格容器。网格容器包含放置在行和列中的网格项。

CSS 网格布局模块创建一个基于网格的布局系统。使用行和列，它可以在没有 float 和 positioning 的情况下设计网页。主要的浏览器如 Google Chrome、Internet Explorer、Firefox、Safari 和 Opera 都支持 CSS 网格。

与表格类似，网格使用户能够将元素对齐到列和行。但与表格相比，使用 CSS 网格可以更轻松地设计布局。以下列出了一些 CSS 网格的属性：

• grid-template-columns: 用于指定列的大小。
• grid-template-rows: 用于指定行的大小。
• grid-template-areas: 用于使用命名项指定网格布局。
• grid-auto-rows: 用于指定行的大小。
• grid-auto-columns: 用于指定列的大小。
• grid-auto-flow: 用于指定自动放置项以及自动行大小的放置方式。

CSS 网格还有其他一些属性，例如 grid-column-gap、grid-row-gap、grid-gap、grid-column-lines、grid-row-lines 等等。

语法

我们将通过使用 display: grid 和 display: inline-grid 的示例来创建网格。

示例

在此示例中，我们还使用了 grid-template-rows 和 grid-template-columns 属性。这里，我们展示了五行，前三行的大小为 auto，最后两行的大小为 50px。还有三列，大小均为 auto。

输出

示例

在此示例中，我们通过使用 display: inline-grid; 属性创建网格。我们还使用了 grid-row-gap 和 grid-column-gap 属性来指定行和列之间的间距。

输出