CSS Grid 是 Web 布局中的一个新特性，可以实现更为灵活和精细的布局。本文将介绍如何使用 CSS Grid 实现像素级的等分布局。
等分布局的定义
等分布局指的是一个区域被等分为若干个部分，每个部分的尺寸相等。例如，一个宽度为 1000 像素的区域，被分为 5 份，每份宽度为 200 像素。这样的布局可以用于制作导航栏、产品展示等等。
使用 CSS Grid 实现等分布局
为了实现像素级的等分布局，我们需要使用 grid-template-rows 或 grid-template-columns 属性。
布局方向
CSS Grid 可以按行或按列进行布局。
例如，我们指定一个 3 行 2 列的网格布局：
.grid {
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(2, 1fr);
}这个布局是这样的：
┌───────┬───────┐ │ │ │ ├───────┼───────┤ │ │ │ ├───────┼───────┤ │ │ │ └───────┴───────┘
其中 repeat(3, 100px) 表示生成 3 行，每行高度为 100 像素；repeat(2, 1fr) 表示生成 2 列，每列宽度占满剩余空间。
等分布局
我们可以通过指定网格线的位置来实现等分布局。
例如，我们指定一个宽度为 1000 像素的容器，将其分为 5 份：
.grid {
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(5, 1fr);
}这个布局是这样的：
┌───────┬───────┬───────┬───────┬───────┐ │ │ │ │ │ │ │ │ │ │ │ │ ├───────┼───────┼───────┼───────┼───────┤ │ │ │ │ │ │ │ │ │ │ │ │ └───────┴───────┴───────┴───────┴───────┘
也就是说，我们需要将容器分为 4 个网格区域，每个网格区域宽度为 (1000 - 4) / 5 = 199.2 像素，但 CSS 中无法使用小数，所以我们需要做如下处理：
-- -------------------- ---- ------- ----- - -------- ----- ------------------- --------- ----- ---------------------- --------- ----- ---------------- ---- - ---------- - ------ ------------ - ---- - --- ------- ------ -
在这里，我们使用 grid-column-gap 属性设置网格列之间的间距为 1 像素；而 calc((1000px - 4px) / 5) 表示计算出每个网格区域的宽度为 (1000 - 4) ÷ 5，然后再减去网格列之间的间距，获得实际宽度。
示例代码
以下是一个完整的示例代码：
-- -------------------- ---- -------
---- -------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
------
-------
----- -
-------- -----
------------------- --------- -----
---------------------- --------- -----
---------------- ----
-
---------- -
------ ------------ - ---- - ---
------- ------
----------------- -----
----------- -------
------------ ------
-
--------效果如下：
┌───────┬───────┬───────┬───────┬───────┐ │ 1 │ 2 │ 3 │ 4 │ 5 │ │ │ │ │ │ │ ├───────┼───────┼───────┼───────┼───────┤ │ │ │ │ │ │ │ │ │ │ │ │ └───────┴───────┴───────┴───────┴───────┘
总结
CSS Grid 可以方便地实现像素级的等分布局，为网页布局提供了更为灵活和精细的工具。需要注意的是，需要使用 calc() 函数计算网格区域的宽度和高度，以便实现完美的布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6485155c48841e9894406bf2