创建一个方便设计的自定义栅格布局

让我们看看如何使用css创建栅格覆盖（grid overlay），这是响应式的，且很容易用户自定义，使用的是css变量（和"css custom properties"相对应）。

grid overlay是开发者的工具，而不是对于用户而言的。所以我们不需要过多的担忧浏览器兼容问题。可以使用postCSS插件cssnext来改变css变量属性，让其兼容旧版浏览器器。

##序言：

当我适应flex布局的时候，我的小伙伴看不懂，所有我创建了可以切换的grid overlay来帮助他们视觉化解说我的布局，而不需要说抽象的具体宽高或者padding值。

##术语

作为前端，尽量使用前端熟悉的术语：

列column：页面的垂直分布

沟gutter：列之间的空间

偏移offset：视口（viewport）之间的空间

基准线baseline：作用于文本的垂直rhythm

##创建grid

1）盒子box

我们使用元素上的pseudo元素来呈现grid。我们想要在一个流式布局的容器里面限制另一个容器的大小，那么可设置里面容器的大小为 100%-（2*offset），且设置一个最大宽度，这样的grid overlay将不会比外面流式布局的容器宽

css：

/* 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;pointer-events: none;
}/* Codepen styling */
body {height: 400vh;
}

效果：

2）列columns

如果你发现你页面的循环模式是“列+沟（column+glutter）”对的形式出现，那么我们可以使用重复的线性gradients（repeating linear gradients）作为背景图片（background-image）

我们可设置背景图片的大小是100%+glutter，让单个循环的模式是100%/columns宽，且设置具体的column为（100%/columns）-gutter宽度

css:

/* 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;pointer-events: none;
}/* Codepen styling */
body {height: 400vh;
}

效果;

3)基准线baseline

可以很方便的向上或者向下增加水平线，下面的例子中通过廖正background-position来调整水平线的位置：

/* 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;pointer-events: none;
}/* Codepen styling */
body {height: 400vh;
}

效果：

4）媒体查询media Queries

我们回顾之前可以看见我们从来木有给列，沟等等设置具体的值。

/* 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);}
}

我们可使用--max_width来针对每个媒体查询。

##帮助文本

就是针对不同的媒体大小设置标志，来指代不同范围的媒体大小

例如，iphone在samll标志范围内，ipad在big标志范围内等等

可以根据用户自己设置标志范围和名字：

/* 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;pointer-events: none;
}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;
}

##实战：栅格系统

如何做到上面一样的栅格系统呢

简单啊：

/* 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;pointer-events: none;
}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;
}

转载于:https://www.cnblogs.com/RachelChen/p/6648897.html

创建一个方便设计的自定义栅格布局相关推荐

PS网页设计教程XIX——在Photoshop中创建一个优雅的作品集的网页布局
作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,"熟读唐诗三百首,不会作诗也会吟". 本系列的教程来源于网上的PS教程,都是国外的 ...
python如何创建一个类_python 3——自定义一个类、object类
1.如何创建一个类? __init__(self): self代表类的实例,而非类类的方法:在类的内部,使用 def 关键字来定义一个方法,与一般函数定义不同,类方法必须包含参数 self, 且为第 ...
python定义一个圆类_（python）创建一个可以比较的自定义类
示例: 对于论坛中的帖子,需要根据帖子的点赞数,浏览数和评论数进行排序.三个排序标准的优先级顺序为:点赞数>浏览数>评论数. 也就是说,先按点赞数排序,如果点赞数相等,其次才按浏览数,最后 ...
beaver彼_如何使用Beaver Builder创建自定义WordPress布局
beaver彼 Do you want to learn how to create custom page layouts in WordPress? Beaver Builder allows y ...
HTML栅格布局container,布局栅格
布局方式先聊聊布局方面的知识,先列据一个实现三栏水平布局(左右定宽,中间自适应)案列,目前有圣杯布局.双飞翼布局.Flex布局和绝对定位布局的几种经典布局. 圣杯布局 & 双飞翼布局(都是三 ...
怎样简单的创建一个vector类?(干货 ! ! !详细 ! ! ! ! !)
Vector接口介绍1 Member functions(创建) 1.建立空vector 2.建立内置类型vector 3.建立自定义类型vector 4.数组方式建立(赋值) 5.迭代器方式建立 M ...
PS网页设计教程XXVI——如何在PS中创建一个专业的网页布局
作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,"熟读唐诗三百首,不会作诗也会吟". 本系列的教程来源于网上的PS教程,都是国外的 ...
PS网页设计教程XXX——在PS中创建一个漫画书主题网页布局
作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,"熟读唐诗三百首,不会作诗也会吟". 本系列的教程来源于网上的PS教程,都是国外的 ...
【Qt教程】2.2 - Qt5 布局管理器（水平、垂直、栅格布局）、弹簧、设计一个登陆界面
使用布局管理器,来设计一个登陆界面都是操作,没代码没理论.参照:Qt设计一登陆窗口布局 1. 新建空工程双击.ui文件,进入界面设计区. 我们新建工程时候,使用的是QMainWindow类,会自动 ...

创建一个方便设计的自定义栅格布局

创建一个方便设计的自定义栅格布局相关推荐

最新文章

热门文章