CSS Grid 完全指南-JavaScript中文网-JavaScript教程资源分享门户

CSS Grid 完全指南

CSS Grid 是最新的前端布局方式，能够让我们用网格状的布局方式来创建复杂的网站布局。本篇文章中，我们将学习如何使用 CSS Grid，并掌握其常见问题，包括如何解决浏览器兼容性问题。

什么是 CSS Grid？

CSS Grid 是一种基于网格网格的布局模式，CSS Grid 可以让我们轻松地创建复杂的网站布局，并带来更好的可读性和可维护性。2020 年，CSS Grid 已被现代浏览器广泛支持，因此我们可以大胆地使用它们。

如何创建 Grid 布局？

创建 Grid 布局，我们需要使用 display: grid 属性。如下所示：

---------- -
  -------- -----
-

上面的代码把 .container 元素设置为 Grid 容器。所有子元素都将成为该容器的项目，可以使用 grid-template-columns 和 grid-template-rows 属性定义网格的列和行。

---------- -
  -------- -----
  ---------------------- --------- -----
  ------------------- --------- -----
-

上面的代码创建了一个 3 行 3 列的网格，每个单元格的大小都相等。

如何定位 Grid 项目？

我们可以使用以下属性来定位项目：

grid-column-start
grid-column-end
grid-row-start
grid-row-end

----- -
  ------------------ --
  --------------- --
  ---------------- --
  ------------- --
-

上面的代码定位了 .item 元素到第二行第二列和第四行第四列之间的区域。

如何创建 Grid 网格模板？

我们可以使用以下常用函数来自定义 Grid 网格模板：

repeat()
fr
auto
minmax()

---------------------- --------- -----

上面的代码创建了包含 3 个等宽列的网格，每个列的宽度比例为 1fr。

---------------------- --------- ------------- -------

上面的代码创建了 3 个宽度最小为 100px 的自适应宽度的列。

Grid 的常见问题以及解决方案

在使用 CSS Grid 时，我们可能会遇到以下问题：

问题一：项目溢出 Grid 容器

如果项目溢出 Grid 容器，则可以使用 grid-auto-flow 属性控制溢出的项目如何重新定位。

---------- -
  -------- -----
  --------------- ------
-

上面的代码将在空白区域中填充项目。

问题二：项目位置不正确

如果项目位置不正确，则可以使用 grid-template-areas 属性来调整项目位置。

---------- -
  -------- -----
  ---------------------- --------- -----
  ------------------- --------- -----
  -------------------- -- - --
                       -- - --
                       -- - ---
-

------- -
  ---------- --
-

------- -
  ---------- --
-

------- -
  ---------- --
-

------- -
  ---------- --
-

------- -
  ---------- --
-

------- -
  ---------- --
-

------- -
  ---------- --
-

------- -
  ---------- --
-

------- -
  ---------- --
-

上面的代码显示了一个 3 行 3 列的网格。.item 类定义了每个项目，并应用于对应的区域。

问题三：不支持 old IE 浏览器

如果你需要在旧版 IE 浏览器中使用 Grid，请使用 prefixed CSS 属性。

---------- -
  -------- ---------
  ----------------- --- --- ----
  -------------- --- --- ----
-

上面的代码将 .container 定义为 MS-Grid 容器。它使用 -ms-grid-columns 和 -ms-grid-rows 属性来创建列和行。

总结

以上是完整的 CSS Grid 指南，我们已经学习了如何使用 Grid 布局，并掌握了其常见问题的解决方案。Grid 布局是前端开发的一个重要技能，我们应该多加练习和实践，以便更好地掌握它。

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/6486cea848841e989455c47f