当我们开发响应式网站时，通常需要实现流体宽度的元素，使得页面在不同设备上自适应屏幕大小。CSS Grid 和 Flexbox 是两个强大的工具，可以帮助我们实现这一目标。
CSS Grid 布局
CSS Grid 是一个二维网格系统，可以让我们以非常复杂的方式布置元素。其中，最适合用于实现流体宽度的特性是指定网格单位的大小。
指定网格单位大小
我们可以为 CSS Grid 网格指定单位的大小，例如 grid-template-columns: repeat(3, 1fr)，这就意味着我们可以将容器分为三列，并用 fr 单位（表示容器可用空间的一部分）指定它们的大小。这将允许网格自适应屏幕大小并充满整个容器。
-- -------------------- ---- -------
-------
--------------- -
-------- -----
---------------------- --------- -----
-
--------
---- -----------------------
---- ------------------
---- -
------
---- ------------------
---- -
------
---- ------------------
---- -
------
------调整网格的大小
我们还可以使用 grid-template-rows 和 grid-template-columns 属性，以及 grid-row 和 grid-column 属性来调整网格的大小。
-- -------------------- ---- -------
-------
--------------- -
-------- -----
---------------------- --- ----
------------------- ----- ------
-
---------- -
----------------- -----
-
------------ -
------------ - - ---- --
-
------------ -
--------- - - ---- --
-
--------
---- -----------------------
---- ---------------- -------------
---- -
------
---- ---------------- -------------
---- -
------
---- ------------------
---- -
------
------Flexbox 布局
Flexbox 是一个非常适合于实现流体宽度的布局模式，它可以在一个维度上维护元素的相对大小和位置。
确定容器和项目的方向性
我们可以使用 flex-direction 属性来确定容器和项目的方向性。默认情况下，容器是水平排列的，但是可以使用 flex-direction: column 使其垂直排列。
-- -------------------- ---- -------
-------
--------------- -
-------- -----
--------------- -------
-
---------- -
----------------- -----
----- --
-
---------------------- -
------- ------
-
--------------------- -
------- ------
-
--------
---- -----------------------
---- ------------------
---- -
------
---- ------------------
---- -
------
---- ------------------
---- -
------
------确定项目的大小
除了可以使用 flex: 1 来指定所有项目的相对大小外，我们还可以使用 flex-basis 来指定单个项目的大小。例如，我们可以指定每个项目的宽度为 33.33%。
-- -------------------- ---- -------
-------
--------------- -
-------- -----
-
---------- -
----------------- -----
----------- -------
-
--------
---- -----------------------
---- ------------------
---- -
------
---- ------------------
---- -
------
---- ------------------
---- -
------
------总结
利用 CSS Grid 和 Flexbox，我们可以轻松实现流体宽度的元素。CSS Grid 允许我们创建复杂的网格并在其中自适应元素，而 Flexbox 可以在一个维度上自适应元素。根据您需要的布局和功能，您可以选择其中一种或两种技术来开发响应式网站。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646b0a1a968c7c53b0a7ba6e