CSS自定义属性+CSS Grid网格实现超级的布局能力

lx1036 发布于2019-08-02 15:08 / 1132人阅读

摘要：自定义属性可以方便的实现很多功能例如主题变化。最近我一直在尝试利用自定义属性和网格的组合能实现什么神奇的效果，我需要在不同的断点处重新定义和属性。太多的可能性了浏览器支持目前，全球的浏览器都支持自定义属性及以下版本是明显的例外。

我在工作中使用CSS Grid已经有几个月了，我非常喜欢它在页面布局时给我的灵活性。这么长时间以来，我们一直没有一个真正的网格布局解决方案——用浮动和flexbox总是有各种各样的限制。但现在，我真的无法想象没有Grid的CSS！

最近我还注意到的一件事就是CSS自定义属性。CSS自定义属性的工作方式有点像SASS和其他预处理器中的变量，主要的区别在于其它方法都是在浏览器中编译后生成，还是原本的CSS写法。CSS自定义属性是真正的动态变量，可以在样式表中或使用javascript即时更新，这使得它们具有更多的可能性。如果你熟悉JavaScript，我喜欢把预处理器变量和CSS自定义属性之间的区别想象成与const和let之间的区别相似——它们都有不同的用途。

CSS自定义属性可以方便的实现很多功能（例如主题变化）。最近我一直在尝试利用CSS自定义属性和CSS网格的组合能实现什么神奇的效果，我需要在不同的断点处重新定义grid-template-rows和grid-template-columns属性。下面的代码中有一个例子，我使用SASS变量定义了页面在不同的宽度下不同的列宽值，这些值将传递到grid-template-rows属性中。我对grid-gap属性也做了同样的操作，这样页面宽度不同时元素之间的间距也是不同的：

$wrapper: 1200px;
$col: 1fr;
$gutter: 20px;

$wrapper-l: 90%;
$col-l: calc((1000px - (13 * 40px)) / 12);
$gutter-l: 40px;

$col-xl: calc((1200px - (13 * 50px)) / 12);
$gutter-xl: 50px;

body {
    background-color: lighten(grey, 30%);
}

.wrapper {
    max-width: $wrapper;
    margin: 20px auto;
    
    @media (min-width: 1300px) {
        max-width: $wrapper-l;
    }
}

.grid {
    display: grid;
    padding: $gutter;
    grid-template-columns: 1fr repeat(12, $col) 1fr;
    grid-template-rows: repeat(2, minmax(150px, auto));
    grid-gap: $gutter;
    border: 1px solid grey;
    background: white;
    width: auto;
    
    @media (min-width: 1300px) {
        grid-template-columns: 1fr repeat(12, $col-l) 1fr;
        grid-gap: $gutter-l;
        padding: $col-l;
    }
    
    @media (min-width: 1500px) {
        grid-template-columns: 1fr repeat(12, $col-xl) 1fr;
        grid-gap: $gutter-xl;
        padding: $col-xl;
    }
}

.grid__item {
    border: 1px solid blue;
}

.grid__item--heading {
    grid-column: 2 / 11;
}

点击查看上图的全部代码和实时效果

就如你所看到的，基本上必须在媒体查询中再次写出整个代码块来改变样式，因为变量一旦定义就固定了。（我当然可以使用mixin，但是最终效果是一样的——一大块代码。）

使用CSS自定义属性，可以减少代码量，因为我只需更新媒体查询中的变量，浏览器就会重新计算网格。十行（sass）代码可能看起来不是一个巨大的节省，但代码的可读性要高得多，因为不必在好几个地方添加媒体查询来处理我们的新变量，我只需在该组件的代码开头声明它们，并且无需担心是否已替换了正在使用的哪个值：

:root {
    --wrapper: 1200px;
    --col: 1fr;
    --gutter: 20px;
    
    @media (min-width: 1300px) {
        --wrapper: 90%;
        --col: calc((1000px - (13 * 40px)) / 12);
        --gutter: 40px;
    }
    
    @media (min-width: 1500px) {
        --wrapper: 90%;
        --col: calc((1200px - (13 * 50px)) / 12);
        --gutter: 50px;
    }
}

body {
    background-color: lighten(grey, 30%);
}

.wrapper {
    max-width: var(--wrapper);
    margin: 20px auto;
}

.grid {
    display: grid;
    padding: var(--gutter);
    grid-template-columns: 1fr repeat(12, var(--col)) 1fr;
    grid-template-rows: repeat(2, minmax(150px, auto));
    grid-gap: var(--gutter);
    border: 1px solid grey;
    background: white;
    width: auto;
}

.grid__item {
    border: 1px solid blue;
}

.grid__item--heading {
    grid-column: 2 / 11;
}

.grid__item--body {
    grid-column: 2 / 8;
    grid-row: 2 / span 1;
}

.grid__item--media {
    background: hotPink;
    grid-column: 11 / 14;
    grid-row: 1 / span 2;
}

点击查看全部代码和实时效果

我发现使用CSS Grid的一个特点是，语法非常冗长，而且并不容易快速、轻松地看到正在发生的事情，特别是在复杂的网格中。但是在这个例子中，使用CSS自定义属性，可以为网格项的大小和坐标设置变量，并且只写一次grid-column和grid-row属性。对我来说，这比每次都写出完整的属性要清楚得多，而且很容易一目了然地看到网格项的位置。

这里有一个随机动态改变自定义变量的DEMO，在这个示例中，我使用javascript循环网格项，并在每次单击按钮时使用随机值更新变量。没有添加类或额外的CSS。

在这个的示例DEMO中，使用用户输入的值动态更改网格项。这里要更新的只是x和y坐标的三个变量以及网格项的大小。

太多的可能性了！

浏览器支持
目前，全球88%的浏览器都支持CSS自定义属性——Internet Explorer 11及以下版本是明显的例外。这与对CSS Grid网格布局的支持大致相同，这意味着要使用特性查询来区分支持与不支持的浏览器。

可以这样使用@supports声明来测试对css自定义属性的支持：

@supports(--css: variables) {
        .my-div {
            --size: 2;
            --posX: 3;
            grid-column: var("--posX") / span var("--size");
        }
    }

云服务器 GPU云服务器自定义css 自定义布局怎么实现 css布局自定义view的实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53921.html

CSS自定义属性+CSS Grid网格实现超级的布局能力

摘要：自定义属性可以方便的实现很多功能例如主题变化。最近我一直在尝试利用自定义属性和网格的组合能实现什么神奇的效果，我需要在不同的断点处重新定义和属性。太多的可能性了浏览器支持目前，全球的浏览器都支持自定义属性及以下版本是明显的例外。我在工作中使用CSS Grid已经有几个月了，我非常喜欢它在页面布局时给我的灵活性。这么长时间以来，我们一直没有一个真正的网格布局解决方案——用浮动和flex...

Panda 2019-08-26 13:53 评论0 收藏0
CSS自定义属性+CSS Grid网格实现超级的布局能力

摘要：自定义属性可以方便的实现很多功能例如主题变化。最近我一直在尝试利用自定义属性和网格的组合能实现什么神奇的效果，我需要在不同的断点处重新定义和属性。太多的可能性了浏览器支持目前，全球的浏览器都支持自定义属性及以下版本是明显的例外。我在工作中使用CSS Grid已经有几个月了，我非常喜欢它在页面布局时给我的灵活性。这么长时间以来，我们一直没有一个真正的网格布局解决方案——用浮动和flex...

greatwhole 2019-08-30 10:58 评论0 收藏0
翻译 | CSS网格（CSS Grid）布局入门

摘要：浏览器兼容性网格布局从开始收到支持，微软在会更新对网格布局的支持。微软的浏览器和有一种比较旧的实现，所以有不少限制，我们会简单介绍新的实现方式和老的实现方式之间的区别，这样你能知道如何规避他们。原文地址：Getting to know CSS Grid Layout 原文作者：Chris Wright 译者：华翔校对者：珂珂、干干翻译 | CSS网格（CSS Grid）布局入...

Ashin 2019-08-29 13:18 评论0 收藏0
CSS Grid 布局完全指南(图解 Grid 详细教程)

摘要：重复网格区域的名称导致内容跨越这些单元格。中间一排将由两个区域，一个是空单元格，一个区域组成。你可以使用任意数量的相邻的点来声明单个空单元格。只要这些点之间没有空隙隔开，他们就代表一个单独的单元格。 CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同，CSS Grid 布局是一个二维布局系统，也就意味着它可以同时处理列和行。通过将 CSS 规则应用...

flybywind 2019-04-23 11:50 评论0 收藏0
如何用 CSS 网格快速做出网站原型

摘要：简评网格模块是创建网站模型的绝佳工具。如果你对网格完全陌生，你可能要浏览一下我的分钟介绍网格的文章。每一行代表一行，每一个字符，，，代表一个网格元素。无论标签在标记中是如何放置的，我们都能随意转换。这被称为源代码的独立性，这是的一大进步。简评：CSS 网格模块是创建网站模型的绝佳工具。它是我尝试过的任何其他系统中最快让你体验布局的工具。我们的网格我们将从模仿一个经典网站的非常基本...

thursday 2019-08-29 14:05 评论0 收藏0