CSS Grid 布局实例：双侧自适应，中间固定宽度的布局

CSS Grid 是一种强大的布局系统，可以轻松实现复杂的布局。在本文中，我们将探讨一种常见的布局：双侧自适应，中间固定宽度的布局。

布局示意图

在这种布局中，左右两侧的内容会自适应宽度，而中间的内容则会固定宽度。以下是布局示意图：

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

实现步骤

要实现这种布局，我们需要使用 CSS Grid。以下是实现步骤：

1. 创建一个包含三列的网格，其中左右两列宽度为自适应，中间列宽度为固定宽度。
2. 在左侧和右侧列中放置内容。
3. 在中间列中放置内容，并将其宽度设置为固定值。

代码实现

以下是实现这种布局的示例代码：

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

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

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

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

指导意义

CSS Grid 布局是一种非常强大的布局系统，可以轻松实现复杂的布局。本文介绍的双侧自适应，中间固定宽度的布局是一种常见的布局，适用于许多网站和应用程序。通过学习本文，您可以了解如何使用 CSS Grid 实现这种布局，并将其应用于您自己的项目中。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d3a311a941bf71346f14db