使用CSS变量提高灵巧布局效率的小技巧
导读
有些情况下，我需要用一种简单的方法来创建网格布局。 例如，每次我改变主意时，在不修改CSS的情况下快速画出五列网格。 在本文中，我们一起探索一些用例，并思考如果实现及使用它们。
它是怎么工作的
在深入探讨这些概念之前，首先我们来回顾一下 CSS 变量的基础知识， 我们也可以将它称为“自定义属性”。
所有主流浏览器都支持CSS变量，下面是各个浏览器的支持情况：
如果要定义CSS变量是全局变量，则需要将其添加到:root声明中（:root等效于<html>）。 如果该变量特定于组件，则可以在该组内声明中定义它。
在下面的例子中，我定义了一个全局变量--size，它用于square 元素的宽度和高度。
:root {
--size: 50px;
}
.square {
width: var(--size);
height: var(--size);
}如果--size没有定义，要怎么办呢?在传递的变量无效的情况下，CSS 支持定义默认变量或回退变量。
在下面的例子中的 var(--size, 10px)。如果--size无效，则宽度和高度值将为 10px。
.square {
width: var(--size, 10px);
height: var(--size, 10px);
}除此之外，还可以在内联CSS样式中使用CSS变量。例如
HTML
<div class="elem" style="--background: red;"></div>
CSS
.elem {
background: var(--background);
}接着， 我们以上述这些概念，还演示一些事例。
CSS网格示例
侧边栏和主内容
在此设计中，我将CSS网格用于以下各项：
边栏和主菜单
表单项
三列布局
侧边栏的宽度是固定的，主内容是变化。假设侧边栏的宽度是240px。
1.边栏和主菜单
Html
<div class="o-grid" style="--columns: 240px 1fr"> <aside></aside> <main></main> </div>
Html
.o-grid {
display: grid;
grid-template-columns: var(--columns);
}2. 表单项
按照设计，每行有两列，html 结构如下：
Html
<div class="o-grid" style="--columns: 1fr 1fr"> <div class="form-group"></div> <div class="form-group"></div> <div class="form-group"></div> <div class="form-group"></div> </div>
CSS
.o-grid {
display: grid;
grid-template-columns: var(--columns);
}3. 三列布局
在下面的示例中，我添加了--repeat-number：3和--gap：8px作为内联CSS。 这些变量将添加到o-grid类，网格的设置将基于这些变量。
HTML
<div class="o-grid" style="--repeat-number: 3; --gap: 8px;"> <div></div> <div></div> <div></div> </div>
CSS
.o-grid {
display: grid;
grid-template-columns: repeat(var(--repeat-number), 1fr);
grid-gap: var(--gap, 0);
}我喜欢在CSS变量中添加默认值，以防变量没有被设置。在上面的代码中，我使用了var(--gap, 0)，如果使用者没有提供--gap变量，则其默认值将为0。
动态网格项：minmax
对我来说，这是一个广泛使用的用例，并且非常重要。我经常使用Grid minmax，但是当我在多个页面上使用它时，我遇到了一个问题。
让我们举一个不使用 CSS 变量的基本示例。
在 CSS 中，我使用minmax为每个网格项目定义最小宽度250px。
CSS
.o-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr);
grid-gap: 16px;
}现在，如果设计要求网格项目的宽度至少为300px，应该怎么做？ 我需要创建类似以下版本吗？
.o-grid--2 {
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}想象一下，有五个不同的网格，每个网格具有不同的项目宽度，所以以上不是正确的解决方案。
使用CSS变量，我可以执行以下操作
.o-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--item-width), 1fr);
grid-gap: var(--gap);
}在HTML中，就可以在标签上设置 CSS 变量：
<!-- Example 1 --> <div class="o-grid" style="--item-width: 250px;"> <div></div> <div></div> <div></div> </div> <!-- Example 2 --> <div class="o-grid" style="--item-width: 350px;"> <div></div> <div></div> <div></div> </div> <!-- Example 3 --> <div class="o-grid" style="--item-width: 150px;"> <div></div> <div></div> <div></div> </div>
事例源码：https://codepen.io/shadeed/pen/7d3e0d575a5cecb86233fc7d72fa90d4
