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

栏目: CSS · 发布时间: 6年前

内容简介:我在工作中使用CSS Grid已经有几个月了,我非常喜欢它在页面布局时给我的灵活性。这么长时间以来,我们一直没有一个真正的网格布局解决方案——用浮动和flexbox总是有各种各样的限制。但现在,我真的无法想象没有Grid的CSS!最近我还注意到的一件事就是CSS自定义属性。CSS自定义属性的工作方式有点像SASS和其他预处理器中的变量,主要的区别在于其它方法都是在浏览器中编译后生成,还是原本的CSS写法。CSS自定义属性是真正的动态变量,可以在样式表中或使用javascript即时更新,这使得它们具有更多的

我在工作中使用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;
}

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

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

就如你所看到的,基本上必须在媒体查询中再次写出整个代码块来改变样式,因为变量一旦定义就固定了。(我当然可以使用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自定义属性+CSS Grid网格实现超级的布局能力

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

我发现使用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');
        }
    }

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


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Just My Type

Just My Type

Simon Garfield / Profile Books / 2010-10-21 / GBP 14.99

What's your type? Suddenly everyone's obsessed with fonts. Whether you're enraged by Ikea's Verdanagate, want to know what the Beach Boys have in common with easy Jet or why it's okay to like Comic Sa......一起来看看 《Just My Type》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

URL 编码/解码
URL 编码/解码

URL 编码/解码