CSS Grid 布局中如何使用 grid-gap 设置行列之间的间距？-JavaScript中文网-JavaScript教程资源分享门户

CSS Grid 布局是一种新的网页布局方式，它可以让我们更方便地创建复杂的网页布局。在使用 CSS Grid 布局时，我们可以使用 grid-gap 属性来设置行列之间的间距，从而让网页布局更加美观。

什么是 grid-gap 属性？

grid-gap 属性用于设置网格行列之间的间距。它可以设置两个值，第一个值表示行之间的间距，第二个值表示列之间的间距。如果只设置一个值，那么它将同时作用于行和列。

如何使用 grid-gap 属性？

我们可以在 grid-template-rows 和 grid-template-columns 属性之后使用 grid-gap 属性来设置行列之间的间距。例如：

.grid-container {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
}

上面的代码将创建一个具有两行两列的网格布局，行列之间的间距为 20 像素。

我们还可以分别设置行和列之间的间距，例如：

.grid-container {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 20px;
  grid-column-gap: 10px;
}

上面的代码将创建一个具有两行两列的网格布局，行之间的间距为 20 像素，列之间的间距为 10 像素。

示例代码

下面是一个完整的示例代码，它将创建一个具有三行三列的网格布局，行列之间的间距为 20 像素：

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

总结

CSS Grid 布局可以让我们更方便地创建复杂的网页布局。在使用 CSS Grid 布局时，我们可以使用 grid-gap 属性来设置行列之间的间距，从而让网页布局更加美观。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/65fd8f25d10417a2228e79b8