从零开始的CSS栅格遮罩工具创建之旅

时间：2023-09-06 06:18:01 | 来源：网站运营

时间：2023-09-06 06:18:01 来源：网站运营

从零开始的CSS栅格遮罩工具创建之旅：

原文地址：Building a CSS Grid Overlay | CSS-Tricks 作者： ANDREAS LARSEN

让我们来看看如何创建一套CSS的栅格遮罩工具，它将会是响应式的，很容易可定制化的并且极度依赖「CSS变量」（更准确意味上的“CSS自定义属性”）。如果你没那么熟悉自定义属性的话，我强烈推荐你去读一下What is the difference between CSS variables and preprocessor variables? | CSS-Tricks，再看一下Lea Verou's enlighting talk的视频


我们的这套栅格遮罩工具就是一个开发者工具，当然只是为了我们自己，而不是为了用户。所以，不用太担心浏览器支持（如果你真的很在乎，对照着Can I use... Support tables for HTML5, CSS3, etc检查一下）。想让预处理的自定义属性表现的如同原生支持的属性显然是不可能的，如果你想要使用它们像使用预处理变量一样，可以用一下postCSS的插件cssnext[Use tomorrow’s CSS syntax, today.],它能够帮你很好地做老浏览器的转换兼容。

前言

几周以前，我简化了一下我们项目中的媒体查询然后加入了一个基于 Flexbox Grid（Flexbox Grid）同样使用方法的布局组件，我下属的一些设计师不能够完全理解它的响应式设计和伸缩性，所以我创造了一个可切换的栅格遮罩工具帮助他们理解


我的愿望是这些可以成为一个协助我们团队在布局相关的讨论上的工具，确保我们不会在代码中使用太多的特定的width，padding等属性

术语

作为一个前端工程师，我希望工程师和设计师能使用同一套术语（越多越好），所以我自建了一套连设计师都很熟悉的CSS变量术语

• Columns列：页面上每一块垂直分割
  
• Gutter间隔：两列the columns之间的空间
  
• Offset边距：视图边距的空间
• Baseline基线：用于内容文字的垂直基准线

构建栅格遮罩

1、盒子模型

我们使用放置在元素之上的伪元素来展示覆盖在我们实际内容上面的栅格。我们想要让遮罩能够伸缩，所以我们定义这个元素的宽度为“100% - (2 * offset)”并且要给定最大宽度否则栅格遮罩的宽度会超出显示范围



查看codePen的例子：1) Box — GRID OVERLAY


/* Settings */:root { --offset: 2rem; --max_width: 72rem; --color: hsla(204, 80%, 72%, 0.25);}/* Styling */html { position: relative;}html::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin-right: auto; margin-left: auto; width: calc(100% - (2 * var(--offset))); max-width: var(--max_width); min-height: 100vh; content: ''; background-color: var(--color); z-index: 1000;}/* Codepen styling */body { height: 400vh;}2、列

观察这个栅格就会注意到 列+间距 是重复填充显示的，我们可以使用 repeating-linear-gradient 作为背景background-image，设置background-image的尺寸到100%+边距，从而使得重复的填充达到 100%/列数 的宽度，实际的列宽为 (100% / 列数) - 边距

查看例子：2) Columns — GRID OVERLAY

/* Settings */:root { --offset: 2rem; --max_width: 72rem; --columns: 6; --gutter: 1rem; --color: hsla(204, 80%, 72%, 0.25);}/* Helper variables */:root { --repeating-width: calc(100% / var(--columns)); --column-width: calc((100% / var(--columns)) - var(--gutter)); --background-width: calc(100% + var(--gutter)); --background-columns: repeating-linear-gradient( to right, var(--color), var(--color) var(--column-width), transparent var(--column-width), transparent var(--repeating-width) );}/* Styling */html { position: relative;}html::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin-right: auto; margin-left: auto; width: calc(100% - (2 * var(--offset))); max-width: var(--max_width); min-height: 100vh; content: ''; background-image: var(--background-columns); background-size: var(--background-width) 100%; z-index: 1000;}/* Codepen styling */body { height: 400vh;}3、基线

我们用repeating linear gradients画了基线但是这样当我们要添加纵向的边距就显得稍稍简陋了点，而且我们要的是一条线而不是一个块级的区域。

我们还加入了一个基线控制的变量baseline-shift，允许我们控制基线上下移动，仅仅通过调整background-position就可以实现这一功能


查看例子：3) Baseline — GRID OVERLAY

/* Settings */:root { --offset: 2rem; --max_width: 72rem; --columns: 6; --gutter: 1rem; --baseline: 3rem; --baseline-offset: 2rem; --color: hsla(204, 80%, 72%, 0.25);}/* Helper variables */:root { --repeating-width: calc(100% / var(--columns)); --column-width: calc((100% / var(--columns)) - var(--gutter)); --background-width: calc(100% + var(--gutter)); --background-columns: repeating-linear-gradient( to right, var(--color), var(--color) var(--column-width), transparent var(--column-width), transparent var(--repeating-width) ); --background-baseline: repeating-linear-gradient( to bottom, var(--color), var(--color) 1px, transparent 1px, transparent var(--baseline) );}/* Styling */html { position: relative;}html::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin-right: auto; margin-left: auto; width: calc(100% - (2 * var(--offset))); max-width: var(--max_width); min-height: 100vh; content: ''; background-image: var(--background-columns), var(--background-baseline); background-size: var(--background-width) 100%; background-position: 0 var(--baseline-offset); z-index: 1000;}/* Codepen styling */body { height: 400vh;}4、媒体查询

现在我们有了基本结构，可以说一下媒体查询的部分了。回过头来看我们所用到的数值，你会发现这些值没有一个绑定到特定的列、边距等等上面。

我们使用移动端作为入口，当我们想要改变媒体查询的时候我们只引入了变量在其中。设置一个新的一个分辨率断点的时候，在断点处都可以改变设定颜色值，使得每个遮罩都会对比明确看起来无比清晰。

我建议在新打开一个tab页，打开codepen的例子，改变不同的变量值或者改变视图尺寸，去观察这些功能都是如何表现的。

查看例子：4) Media Queries — GRID OVERLAY

/* Settings */:root { --offset: 1.5rem; --max_width: 72rem; --columns: 6; --gutter: .5rem; --baseline: 3rem; --baseline-shift: 2rem; --color: hsla(204, 80%, 72%, 0.25);}@media (min-width: 35em) { :root { --offset: 2rem; --gutter: .75rem; --color: hsla(286, 51%, 44%, 0.25); }}@media (min-width: 48em) { :root { --offset: 3rem; --columns: 12; --gutter: 1rem; --color: hsla(204, 80%, 72%, 0.25); }}@media (min-width: 70em) { :root { --offset: 4rem; --color: hsla(286, 51%, 44%, 0.25); }}/* Helper variables */:root { --repeating-width: calc(100% / var(--columns)); --column-width: calc((100% / var(--columns)) - var(--gutter)); --background-width: calc(100% + var(--gutter)); --background-columns: repeating-linear-gradient( to right, var(--color), var(--color) var(--column-width), transparent var(--column-width), transparent var(--repeating-width) ); --background-baseline: repeating-linear-gradient( to bottom, var(--color), var(--color) 1px, transparent 1px, transparent var(--baseline) );}html { position: relative;}html::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin-right: auto; margin-left: auto; width: calc(100% - (2 * var(--offset))); max-width: var(--max_width); min-height: 100vh; content: ''; background-image: var(--background-columns), var(--background-baseline); background-size: var(--background-width) 100%; background-position: 0 var(--baseline-shift); z-index: 1000;}/* Codepen styling */body { height: 400vh;}如果你在看第一步的时候，脑中产生了一大堆疑问如“如果在一个特殊的显示宽度、一个特殊的分辨率断点会发生什么事呢”那现在你就可以通过为每一个媒体查询设置--max_width来得到很明确的解答。


5、帮助内容

设计师喜欢去思考适配不同的设备——很明显能让页面在不同的设备上都观感良好是一件很棒的事——但是有时候我们又会忘记ipad应该放在哪种屏幕宽度的分辨率断点上。


这种分辨率断点不仅是被称作"iPhone", "Galaxy Note ", "iPad"等等的那些，有些时候是包括了全部的屏幕宽度。一个分辨率断点表示的是一个宽度范围而不是某种特殊设备的屏幕。


为了更好的区分我们自己设计的“分辨率断点”，我们把这些断点名称加入了我们自己的栅格遮罩中。


查看例子：5) Help Text — GRID OVERLAY

/* Settings */:root { --offset: 1.5rem; --max_width: 72rem; --columns: 6; --gutter: .5rem; --baseline: 3rem; --baseline-shift: 2rem; --color: hsla(204, 80%, 72%, 0.25); --media-query: 'base';}@media (min-width: 35em) { :root { --offset: 2rem; --gutter: .75rem; --color: hsla(286, 51%, 44%, 0.25); --media-query: 'small'; }}@media (min-width: 48em) { :root { --offset: 3rem; --columns: 12; --gutter: 1rem; --color: hsla(204, 80%, 72%, 0.25); --media-query: 'medium'; }}@media (min-width: 70em) { :root { --offset: 4rem; --color: hsla(286, 51%, 44%, 0.25); --media-query: 'large'; }}/* Helper variables */:root { --repeating-width: calc(100% / var(--columns)); --column-width: calc((100% / var(--columns)) - var(--gutter)); --background-width: calc(100% + var(--gutter)); --background-columns: repeating-linear-gradient( to right, var(--color), var(--color) var(--column-width), transparent var(--column-width), transparent var(--repeating-width) ); --background-baseline: repeating-linear-gradient( to bottom, var(--color), var(--color) 1px, transparent 1px, transparent var(--baseline) );}html { position: relative;}html::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin-right: auto; margin-left: auto; width: calc(100% - (2 * var(--offset))); max-width: var(--max_width); min-height: 100vh; content: ''; background-image: var(--background-columns), var(--background-baseline); background-size: var(--background-width) 100%; background-position: 0 var(--baseline-shift); z-index: 1000;}html::after { content: var(--media-query); position: fixed; top: 1rem; left: 1rem; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; color: var(--color);}/* Codepen styling */body { height: 400vh;}我有一个梦想~那就是有一天设计师不再跑过来对着工程师大喊：“我们需要适配ipad的屏幕！”而是说“我们需要调整到「中等medium」宽度”。


6、其他

能不能做出适应列和边距的线条？简单，那只是CSS就能做到。更多的分辨率断点？简单，那只是CSS。你想要更多颜色？简单……你已经得到了。?

更多例子：6) Advanced — GRID OVERLAY

/* Settings */:root { --offset: 1.5rem; --max_width: 72rem; --columns: 6; --gutter: .5rem; --baseline: 1rem; --baseline-shift: calc(var(--baseline) / 2); --line-thickness: 1px; --color: hsla(204, 80%, 72%, 0.25); --media-query: 'base';}@media (min-width: 35em) { :root { --offset: 2rem; --gutter: .75rem; --baseline: 1.5rem; --color: hsla(286, 51%, 44%, 0.25); --media-query: 'small'; }}@media (min-width: 48em) { :root { --offset: 3rem; --columns: 12; --gutter: 1rem; --baseline: 2rem; --color: hsla(204, 80%, 72%, 0.25); --media-query: 'medium'; }}@media (min-width: 70em) { :root { --offset: 4rem; --baseline: 3rem; --color: hsla(286, 51%, 44%, 0.25); --media-query: 'large'; }}/* Helper variables */:root { --repeating-width: calc(100% / var(--columns)); --column-width: calc((100% / var(--columns)) - var(--gutter)); --background-width: calc(100% + var(--gutter)); --background-columns: repeating-linear-gradient( to right, var(--color), var(--color) var(--line-thickness), transparent var(--line-thickness), transparent calc(var(--column-width) - var(--line-thickness)), var(--color) calc(var(--column-width) - var(--line-thickness)), var(--color) var(--column-width), transparent var(--column-width), transparent var(--repeating-width) ); --background-baseline: repeating-linear-gradient( to bottom, var(--color), var(--color) 1px, transparent 1px, transparent var(--baseline) );}html { position: relative;}html::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin-right: auto; margin-left: auto; width: calc(100% - (2 * var(--offset))); max-width: var(--max_width); min-height: 100vh; content: ''; background-image: var(--background-columns), var(--background-baseline); background-size: var(--background-width) 100%; background-position: 0 var(--baseline-shift); z-index: 1000;}html::after { content: var(--media-query); position: fixed; top: 1rem; left: 1rem; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; color: var(--color);}/* Codepen styling */body { height: 400vh;}你可以在Github看到这个项目，也可以在chrome商店使用这个插件。

github地址：larsenwork/CSS-Responsive-Grid-Overlay