在前端开发中，动态通栏布局是一个常见的需求。可以通过 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 示例代码，可以帮助你了解其基本概念和语法：

// javascriptcn.com 代码示例
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
  grid-gap: 10px;
}

.item {
  background-color: #ccc;
}

在上面的代码中，我们定义了一个网格容器 .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 的定义:

// javascriptcn.com 代码示例
.header {
  grid-column: 1 / -1;
  background-color: var(--color-main);
  color: var(--color-white);
  height: 100px;
  display: flex;
  justify-content: space-between;
  padding: 0 var(--cell-padding);
  align-items: center;
}

.main {
  grid-column: 1 / span 8;
  grid-row: 2;
  background-color: var(--color-white);
  padding: var(--cell-padding);
  border: var(--border-width) solid var(--color-accent);
}

.sidebar {
  grid-column: 9 / -1;
  grid-row: 2;
  background-color: var(--color-main);
  color: var(--color-white);
  height: calc(100vh - 200px);
  padding: var(--cell-padding);
}

.footer {
  grid-column: 1 / -1;
  grid-row: 3;
  background-color: var(--color-main);
  color: var(--color-white);
  text-align: center;
  height: 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

在这个样式表中，我们将头部（.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 变量的值更改，然后在网页上将新的选择状态显示出来：

// javascriptcn.com 代码示例
const planA = document.querySelector('#plan-a');
const planB = document.querySelector('#plan-b');
const selectedPlan = document.querySelector('#selected-plan');

planA.addEventListener('click', function() {
  document.documentElement.style.setProperty('--color-main', 'var(--plan-a-bg)');
  document.documentElement.style.setProperty('--color-accent', 'var(--plan-a-text)');
  selectedPlan.innerText = 'Plan A';
});

planB.addEventListener('click', function() {
  document.documentElement.style.setProperty('--color-main', 'var(--plan-b-bg)');
  document.documentElement.style.setProperty('--color-accent', 'var(--plan-b-text)');
  selectedPlan.innerText = 'Plan B';
});

在上面的代码中，我们选择通过document.querySelector获取到选择器的 ID 。然后，我们监视按钮的单击事件，并使用 setProperty() 方法动态更改 CSS 变量的值。在最后，我们使用 innerText 和 <span id="selected-plan"> 标记，显示用户选择方案的名称。

这样，我们就实现了一个动态通栏布局，可以通过 CSS Grid 和 CSS 自定义属性相结合来完成。我们可以通过 JavaScript 来更改 CSS 变量的值，以动态更改样式，并将其应用到整个页面上，这为用户提供了极大的灵活性和可配置性。

完整示例代码

以下是实现动态通栏布局的完整 HTML、CSS 和 JavaScript 代码：

HTML

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS Grid and CSS Variables Demo</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <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> 

  <div class="wrapper">
    <div class="main">
      <h2>Main Content</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non accumsan leo, vel pharetra felis. Donec consequat euismod blandit. Nullam ut purus ligula. Praesent vestibulum eleifend odio, quis blandit eros venenatis et.</p>
      <p>Mauris ornare, neque at commodo rutrum, nisi odio volutpat tortor, eu consectetur nibh augue in nisl. Aliquam erat volutpat. Fusce vel commodo quam, id euismod lectus.</p>
    </div>
    <div class="sidebar">
      <h2>Sidebar Content</h2>
      <ul>
        <li>List Item 1</li>
        <li>List Item 2</li>
        <li>List Item 3</li>
        <li>List Item 4</li>
        <li>List Item 5</li>
      </ul>
    </div>
  </div> 

  <div class="footer">
    <p>Footer Content</p>
  </div>

  <script src="index.js"></script>
</body>
</html>

CSS

// javascriptcn.com 代码示例
:root {
  --color-main: #424242;
  --color-accent: #81C784;
  --color-white: #fff;
  --cell-padding: 10px;
  --border-width: 1px;
  --plan-a-bg: #424242;
  --plan-a-text: #FFFFFF;
  --plan-b-bg: #81C784;
  --plan-b-text: #FFFFFF;
}

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.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);
}

.header {
  grid-column: 1 / -1;
  background-color: var(--color-main);
  color: var(--color-white);
  height: 100px;
  display: flex;
  justify-content: space-between;
  padding: 0 var(--cell-padding);
  align-items: center;
}

.main {
  grid-column: 1 / span 8;
  grid-row: 2;
  background-color: var(--color-white);
  padding: var(--cell-padding);
  border: var(--border-width) solid var(--color-accent);
}

.sidebar {
  grid-column: 9 / -1;
  grid-row: 2;
  background-color: var(--color-main);
  color: var(--color-white);
  height: calc(100vh - 200px);
  padding: var(--cell-padding);
}

.footer {
  grid-column: 1 / -1;
  grid-row: 3;
  background-color: var(--color-main);
  color: var(--color-white);
  text-align: center;
  height: 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.button-group {
  display: flex;
}

button {
  padding: 10px;
  background-color: var(--color-white);
  color: var(--color-main);
  border: none;
  margin-right: 10px;
  cursor: pointer;
}

button:hover {
  background-color: var(--color-accent);
  color: var(--color-white);
}

#selected-plan {
  color: var(--color-accent);
}

JavaScript

// javascriptcn.com 代码示例
const planA = document.querySelector('#plan-a');
const planB = document.querySelector('#plan-b');
const selectedPlan = document.querySelector('#selected-plan');

planA.addEventListener('click', function() {
  document.documentElement.style.setProperty('--color-main', 'var(--plan-a-bg)');
  document.documentElement.style.setProperty('--color-accent', 'var(--plan-a-text)');
  selectedPlan.innerText = 'Plan A';
});

planB.addEventListener('click', function() {
  document.documentElement.style.setProperty('--color-main', 'var(--plan-b-bg)');
  document.documentElement.style.setProperty('--color-accent', 'var(--plan-b-text)');
  selectedPlan.innerText = 'Plan B';
});

总结

CSS Grid 和 CSS 自定义属性相结合，可以实现动态通栏布局，并在全局范围内共享定义的样式变量。这样，我们可以使用 JavaScript 更改 CSS 变量的值，以动态更改样式，并将其应用到整个页面上，这为用户提供了极大的灵活性和可配置性。通过使用 CSS Grid 和 CSS 自定义属性，我们可以更轻松地完成布局和样式设计，并节省大量的 CSS 代码。

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

前端开发：结合 CSS Grid 和 CSS 自定义属性实现动态通栏布局

CSS Grid 介绍

CSS 自定义属性介绍

结合 CSS Grid 和 CSS 自定义属性实现动态通栏布局

步骤一：创建 HTML 结构

步骤二：创建 CSS 样式

步骤三：动态使用 CSS 自定义属性

完整示例代码

HTML

CSS

JavaScript

总结

纠错反馈

前端开发：结合 CSS Grid 和 CSS 自定义属性实现动态通栏布局

CSS Grid 介绍

CSS 自定义属性 介绍

结合 CSS Grid 和 CSS 自定义属性 实现动态通栏布局

步骤一：创建 HTML 结构

步骤二：创建 CSS 样式

步骤三：动态使用 CSS 自定义属性

完整示例代码

HTML

CSS

JavaScript

总结

CSS 自定义属性介绍

结合 CSS Grid 和 CSS 自定义属性实现动态通栏布局