CSS Grid 实现水平平分与垂直平分的方法

CSS Grid 是现代前端技术中非常受欢迎的一种布局方式，它可以实现非常复杂的布局效果。其中，水平和垂直平分是常见的布局需求，本文将介绍如何使用 CSS Grid 实现水平平分和垂直平分。

水平平分

在实现水平平分时，我们可以将父元素的 display 属性设置为 grid，然后用 grid-template-columns 属性来定义每一列的宽度。假设有 4 个子元素需要平分宽度，代码可以这样写：

.parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

上面的代码中，repeat(4, 1fr) 表示将父元素分成 4 列，并且每一列的宽度都是 1fr，也就是均等分布。

如果我们需要在不同的屏幕宽度下实现不同的平分效果，可以使用媒体查询，如下所示：

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

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

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

垂直平分

在实现垂直平分时，我们可以将父元素的 display 属性设置为 grid，然后用 grid-template-rows 属性来定义每一行的高度。假设有 3 个子元素需要平分高度，代码可以这样写：

.parent {
  display: grid;
  height: 300px;
  grid-template-rows: repeat(3, 1fr);
}

上面的代码中，repeat(3, 1fr) 表示将父元素分成 3 行，并且每一行的高度都是 1fr，也就是均等分布。

如果我们需要在不同的屏幕高度下实现不同的平分效果，可以使用媒体查询，如下所示：

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

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

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

结语

通过 CSS Grid 实现水平平分和垂直平分是非常简单的，只需要设置好 grid-template-columns 或者 grid-template-rows 的属性即可。我们可以灵活运用媒体查询，根据不同的屏幕大小来实现不同的效果。CSS Grid 不仅可以提高我们的布局效率，而且减少了代码量和维护成本，希望本文对你有所帮助。

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