CSS Grid 布局中如何使用 grid-gap、grid-template-columns 和 grid-template-rows 设置网格间距和行列大小？-JavaScript中文网-JavaScript教程资源分享门户

前言

CSS Grid 布局是一种新的布局方式，它可以让我们更方便地实现网格布局，同时也能够让网页更加美观和易于维护。本文将介绍如何使用 grid-gap、grid-template-columns 和 grid-template-rows 这三个属性来设置网格间距和行列大小。

grid-gap

grid-gap 属性用于设置网格之间的间距。它有两个值，分别表示行间距和列间距。例如：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  grid-gap: 20px 10px;
}

这个例子中，我们设置了一个 3x3 的网格布局，每个网格的宽度是相等的，高度为 100px。行间距为 20px，列间距为 10px。

grid-template-columns 和 grid-template-rows

grid-template-columns 和 grid-template-rows 属性用于设置网格的列宽和行高。它们可以使用多个值来表示不同的列宽和行高，也可以使用 repeat() 函数来表示重复的列宽和行高。例如：

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: repeat(3, 100px);
  grid-gap: 20px;
}

这个例子中，我们设置了一个 3x3 的网格布局，第一列和第三列的宽度为 1fr，第二列的宽度为 2fr。每个网格的高度为 100px，行间距为 20px。

示例代码

下面是一个完整的示例代码，你可以复制到你的 HTML 文件中运行：

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

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

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

结论

通过使用 grid-gap、grid-template-columns 和 grid-template-rows 这三个属性，我们可以更加方便地设置网格之间的间距和行列大小。同时，我们还可以通过 repeat() 函数来表示重复的列宽和行高，使得代码更加简洁和易于维护。

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