CSS网格是什么？

网格可以定义为垂直和水平线的交叉集合。CSS网格布局将页面划分为主要部分。网格属性提供了一个基于网格的布局系统，包含行和列。它使得网页设计无需定位和浮动即可轻松完成。网格布局为我们提供了一种在 CSS 中，而不是在 HTML 中，来创建图示的网格结构的方法。

与表格类似，它允许用户将元素排列成行和列。但与表格相比，使用 CSS 网格更容易设计布局。我们可以使用 **grid-template-rows** 和 **grid-template-columns** 属性在网格中定义行和列。

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

网格与 Flexbox

一个常见的问题是网格与 Flexbox 有何不同。网格用于二维布局（同时包含行和列），而 Flexbox 用于一维布局（仅包含行或仅包含列）。当需要将元素呈直线排列时，可以使用 Flexbox。

Flexbox 用于将元素排列在单个列或单个行中。另一方面，网格最适合将元素排列在多个列和行中。

让我们通过一个例子来理解 CSS 中的网格。

示例

输出