在前端开发中，动态通栏布局是一个常见的需求。可以通过 CSS Grid 和 CSS 自定义属性相结合实现此目的。CSS Grid 是一个强大的布局系统，CSS 自定义属性又被称为 CSS 变量，可以让我们在整个应用程序中定义的样式具有可重用性。
CSS Grid 介绍
CSS Grid 是一个二维网格布局系统，它可以将元素进行分隔，并将它们放入一个网格中。CSS Grid 布局通过定义行和列来创建布局。
以下是 CSS Grid 的一些基本概念：
网格容器：包含子元素的元素。在 CSS 中，网格容器由 display: grid; 属性定义。
网格列和网格行：构成网格的列和行。
网格单元格：由网格列和网格行组成的一个单元格。
网格线：在网格布局中连接网格单元格的线。
网格轨道：网格线之间的空间。在 CSS Grid 中，我们可以定义列轨道和行轨道。
CSS Grid 以一种更简洁的方式处理布局，可以减少我们书写大量的 CSS 代码。下面是一个简单的 CSS Grid 示例代码，可以帮助你了解其基本概念和语法：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --- --- ---- ------------------- ----- ------ --------- ----- - ----- - ----------------- ----- -
在上面的代码中，我们定义了一个网格容器 .container，它包含 3 个等宽的列和两行高。我们还定义了所有子元素 .item 背景颜色为灰色。 grid-gap 属性用于定义每个单元格间的间距。
CSS 自定义属性 介绍
CSS 自定义属性是一种非常有用的功能，可以让我们在整个网站中定义一些重用值（如颜色，字体大小，距离等）并多次使用。 CSS 自定义属性通常被称为 CSS 变量，可以通过 -- 前缀定义并在整个样式表中使用。
当然，CSS 自定义属性的优势不仅在于多次可复用。还可以根据需求动态修改样式，例如通过 JavaScript 动态更改 CSS 样式。
以下是一个简单的示例，展示了如何使用自定义属性：
:root {
--primary-color: #f00;
}
span {
color: var(--primary-color);
}在上面的代码中，我们在 :root 伪类中定义了变量 --primary-color 并将其设置为红色。在 span 元素中，我们使用 color 属性将文本颜色设置为自定义变量。
结合 CSS Grid 和 CSS 自定义属性 实现动态通栏布局
现在我们已经了解了 CSS Grid 和 CSS 自定义属性，接下来通过结合这两个特性，实现一个动态通栏布局。我们将使用 repeat() 函数、CSS 变量和 JavaScript 动态修改 CSS 样式来实现。
步骤一：创建 HTML 结构
<div class="wrapper"> <div class="header"></div> <div class="main"></div> <div class="sidebar"></div> <div class="footer"></div> </div>
在上面的代码中，我们使用 div 元素来分别代表通栏布局的头部 header、主体 main、侧边栏 sidebar 和页脚 footer 。
步骤二：创建 CSS 样式
首先使用 :root 定义重用颜色变量，它可以在此文件的任何位置使用。
:root {
--color-main: #424242;
--color-accent: #81C784;
--color-white: #fff;
--cell-padding: 10px;
--border-width: 1px;
}然后，我们为外层包装器 .wrapper 定义基本样式，使其全宽度显示，高度最小限度定义为 calc(100vh - 100px ) （显示区域减去页尾和页面头部分的高度）。
.wrapper {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: auto 1fr auto;
grid-gap: var(--cell-padding);
height: calc(100vh - 100px);
padding: 0 var(--cell-padding);
}在这个样式中，我们使用 repeat() 函数为 .wrapper 元素的网格列定义 12 个等宽的列，并将网格行定义为自动大小。
我们定义通过 var() 函数使用 CSS 自定义属性来引用其他自定义属性值，因此我们一旦更改一个变量值，就可以这四个变量的整个样式。
我们定义单元格之间的间距，将网格的 cellpadding 的值生效。接下来就是 .header、.main 和 .footer 的定义:
-- -------------------- ---- ------- ------- - ------------ - - --- ----------------- ------------------ ------ ------------------- ------- ------ -------- ----- ---------------- -------------- -------- - -------------------- ------------ ------- - ----- - ------------ - - ---- -- --------- -- ----------------- ------------------- -------- -------------------- ------- ------------------- ----- -------------------- - -------- - ------------ - - --- --------- -- ----------------- ------------------ ------ ------------------- ------- ---------- - ------- -------- -------------------- - ------- - ------------ - - --- --------- -- ----------------- ------------------ ------ ------------------- ----------- ------- ------- ------ -------- ----- ---------------- ------------- ------------ ------- -
在这个样式表中，我们将头部（.header）的行从 1 列到结束列（即 -1），将主体（.main）的列从第一列开始，共 8 列）定义为动态通栏。右边的边栏（.sidebar） 的行与主体相同，通过使用剩余的 4 列来实现，页脚将又动态通栏行，跨越整个屏幕。
步骤三：动态使用 CSS 自定义属性
在这一步，我们将使用 JavaScript 动态地更改 CSS 变量来实现一个动态通栏。在这个示例中，我们将创建两个按钮，每个按钮单击时将更改 CSS 变量的值。
首先，我们创建两个按钮和一个货架标签，用于在页面顶部显示已选择的方案：
<div class="header">
<h1>Welcome to CSS Grid and CSS Variables Demo</h1>
<div class="button-group">
<button id="plan-a">Plan A</button>
<button id="plan-b">Plan B</button>
</div>
<h2>You selected <span id="selected-plan">Plan A</span>.</h2>
</div> 然后，我们创建两个与按钮关联的 CSS 自定义属性：
:root {
--plan-a-bg: #424242;
--plan-a-text: #FFFFFF;
--plan-b-bg: #81C784;
--plan-b-text: #FFFFFF;
}接下来，我们使用 JavaScript 监听两个按钮的单击事件，并将 CSS 变量的值更改，然后在网页上将新的选择状态显示出来：
-- -------------------- ---- ------- ----- ----- - ---------------------------------- ----- ----- - ---------------------------------- ----- ------------ - ----------------------------------------- ------------------------------- ---------- - ---------------------------------------------------------- -------------------- ------------------------------------------------------------ ---------------------- ---------------------- - ----- --- --- ------------------------------- ---------- - ---------------------------------------------------------- -------------------- ------------------------------------------------------------ ---------------------- ---------------------- - ----- --- ---
在上面的代码中，我们选择通过document.querySelector获取到选择器的 ID 。然后，我们监视按钮的单击事件，并使用 setProperty() 方法动态更改 CSS 变量的值。在最后，我们使用 innerText 和 <span id="selected-plan"> 标记，显示用户选择方案的名称。
这样，我们就实现了一个动态通栏布局，可以通过 CSS Grid 和 CSS 自定义属性相结合来完成。我们可以通过 JavaScript 来更改 CSS 变量的值，以动态更改样式，并将其应用到整个页面上，这为用户提供了极大的灵活性和可配置性。
完整示例代码
以下是实现动态通栏布局的完整 HTML、CSS 和 JavaScript 代码：
HTML
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----- --------------- ---------------------------- -------------------
----- ---------------------------- ------------------
---------- ---- --- --- --------- ------------
----- ---------------- ------------------
-------
------
---- ---------------
----------- -- --- ---- --- --- --------- ---------
---- ---------------------
------- ---------------- ----------
------- ---------------- ----------
------
------- -------- ----- ----------------------- --------------
------
---- ----------------
---- -------------
-------- ------------
-------- ----- ----- --- ----- ----------- ---------- ----- -- --- -------- ---- --- -------- ------ ----- --------- ------- -------- ------ -- ----- ------- -------- ---------- -------- ----- ---- ------- ---- --------- -------
--------- ------- ----- -- ------- ------- ---- ---- -------- ------- -- ----------- ---- ----- -- ----- ------- ---- --------- ----- --- ------- ----- -- ------- -----------
------
---- ----------------
----------- ------------
----
-------- ---- ------
-------- ---- ------
-------- ---- ------
-------- ---- ------
-------- ---- ------
-----
------
------
---- ---------------
--------- -----------
------
------- ------------------------
-------
-------CSS
-- -------------------- ---- ------- ----- - ------------- -------- --------------- -------- -------------- ----- --------------- ----- --------------- ---- ------------ -------- -------------- -------- ------------ -------- -------------- -------- - ---- - ------- -- -------- -- ------------ ----------- - -------- - -------- ----- ---------------------- ---------- ----- ------------------- ---- --- ----- --------- -------------------- ------- ---------- - ------- -------- - -------------------- - ------- - ------------ - - --- ----------------- ------------------ ------ ------------------- ------- ------ -------- ----- ---------------- -------------- -------- - -------------------- ------------ ------- - ----- - ------------ - - ---- -- --------- -- ----------------- ------------------- -------- -------------------- ------- ------------------- ----- -------------------- - -------- - ------------ - - --- --------- -- ----------------- ------------------ ------ ------------------- ------- ---------- - ------- -------- -------------------- - ------- - ------------ - - --- --------- -- ----------------- ------------------ ------ ------------------- ----------- ------- ------- ------ -------- ----- ---------------- ------------- ------------ ------- - ------------- - -------- ----- - ------ - -------- ----- ----------------- ------------------- ------ ------------------ ------- ----- ------------- ----- ------- -------- - ------------ - ----------------- -------------------- ------ ------------------- - -------------- - ------ -------------------- -
JavaScript
-- -------------------- ---- ------- ----- ----- - ---------------------------------- ----- ----- - ---------------------------------- ----- ------------ - ----------------------------------------- ------------------------------- ---------- - ---------------------------------------------------------- -------------------- ------------------------------------------------------------ ---------------------- ---------------------- - ----- --- --- ------------------------------- ---------- - ---------------------------------------------------------- -------------------- ------------------------------------------------------------ ---------------------- ---------------------- - ----- --- ---
总结
CSS Grid 和 CSS 自定义属性相结合，可以实现动态通栏布局，并在全局范围内共享定义的样式变量。这样，我们可以使用 JavaScript 更改 CSS 变量的值，以动态更改样式，并将其应用到整个页面上，这为用户提供了极大的灵活性和可配置性。通过使用 CSS Grid 和 CSS 自定义属性，我们可以更轻松地完成布局和样式设计，并节省大量的 CSS 代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f75edff6b2d6eab3fd1e1d