CSS Grid 是一种强大的布局工具，可以帮助开发者更轻松地创建复杂的网页布局。它提供了一种灵活的方式来管理网格布局，使得我们可以轻松地实现原始大小高度的网格。
什么是 CSS Grid？
CSS Grid 是一种二维网格布局系统，可以使用它来创建复杂的布局结构。在 CSS Grid 中，我们可以定义一个网格容器，然后在容器内定义网格行和网格列，这些行和列组成了网格。我们可以使用 CSS Grid 的属性来定义每个网格的大小、位置和间距等。
如何实现原始大小高度？
在 CSS Grid 中，我们可以使用 grid-template-rows 和 grid-template-columns 属性来定义网格的行和列。默认情况下，这些行和列的大小是自适应的，它们会根据网格容器的大小自动调整。如果我们想要实现原始大小高度，我们需要使用 minmax() 函数来定义每个行和列的最小和最大大小。
例如，如果我们想要定义一个 3 行 3 列的网格，并且希望每个网格都有一个固定的大小，我们可以这样写：
.grid-container {
display: grid;
grid-template-columns: repeat(3, minmax(100px, 1fr));
grid-template-rows: repeat(3, minmax(100px, 1fr));
}在上面的代码中，我们使用 repeat() 函数来定义 3 行 3 列的网格，然后使用 minmax() 函数来定义每个网格的最小和最大大小为 100px 和 1fr（1fr 表示剩余空间的比例）。这样，每个网格都会有一个固定的大小，并且随着容器的缩放，它们也会相应地调整大小。
示例代码
下面是一个简单的例子，演示了如何使用 CSS Grid 实现原始大小高度的网格布局：
-- -------------------- ---- ------- ---- ----------------------- ---- ---------------- --------------- ---- ---------------- --------------- ---- ---------------- --------------- ---- ---------------- --------------- ---- ---------------- --------------- ---- ---------------- --------------- ---- ---------------- --------------- ---- ---------------- --------------- ---- ---------------- --------------- ------
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- --------- ------------- ------ ------------------- --------- ------------- ------ ---- ----- - ---------- - ----------------- ----- -------- ----- ------------ ------- ---------------- ------- ---------- ----- - ------- - --------- - - -- ------------ - - -- - ------- - --------- - - -- ------------ - - -- - ------- - --------- - - -- ------------ - - -- - ------- - --------- - - -- ------------ - - -- - ------- - --------- - - -- ------------ - - -- - ------- - --------- - - -- ------------ - - -- - ------- - --------- - - -- ------------ - - -- - ------- - --------- - - -- ------------ - - -- - ------- - --------- - - -- ------------ - - -- -
在上面的代码中，我们定义了一个 3 行 3 列的网格布局，并使用 gap 属性来定义网格之间的间距。然后，我们为每个网格定义了一个固定的大小，并使用 grid-row 和 grid-column 属性来指定每个网格的位置。最后，我们使用一些基本的样式来美化每个网格。
结论
CSS Grid 是一种强大的布局工具，可以帮助开发者更轻松地创建复杂的网页布局。通过使用 minmax() 函数，我们可以轻松地实现原始大小高度的网格布局。希望这篇文章能够帮助你更好地理解 CSS Grid 的用法，并在实际项目中应用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673aeeaa39d6d08e88b09bfc