?

讓我們看看如何使用css創(chuàng)建柵格覆蓋（grid overlay），這是響應(yīng)式的，且很容易用戶自定義，使用的是css變量（和"css custom properties"相對應(yīng)）。

grid overlay是開發(fā)者的工具，而不是對于用戶而言的。所以我們不需要過多的擔憂瀏覽器兼容問題。可以使用postCSS插件cssnext來改變css變量屬性，讓其兼容舊版瀏覽器器。

##序言：

當我適應(yīng)flex布局的時候，我的小伙伴看不懂，所有我創(chuàng)建了可以切換的grid overlay來幫助他們視覺化解說我的布局，而不需要說抽象的具體寬高或者padding值。

##術(shù)語

作為前端，盡量使用前端熟悉的術(shù)語：

列column： 頁面的垂直分布

溝gutter： 列之間的空間

偏移offset：視口（viewport）之間的空間

基準線baseline：作用于文本的垂直rhythm

?

?##創(chuàng)建grid

1）盒子box

我們使用元素上的pseudo元素來呈現(xiàn)grid。我們想要在一個流式布局的容器里面限制另一個容器的大小，那么可設(shè)置里面容器的大小為 100%-（2*offset），且設(shè)置一個最大寬度，這樣的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

如果你發(fā)現(xiàn)你頁面的循環(huán)模式是“列+溝（column+glutter）”對的形式出現(xiàn)，那么我們可以使用重復的線性gradients（repeating linear gradients）作為背景圖片（background-image）

我們可設(shè)置背景圖片的大小是100%+glutter，讓單個循環(huán)的模式是100%/columns寬，且設(shè)置具體的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來調(diào)整水平線的位置：

/* 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

我們回顧之前可以看見我們從來木有給列，溝等等設(shè)置具體的值。

/* 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來針對每個媒體查詢。

?

##幫助文本

就是針對不同的媒體大小設(shè)置標志，來指代不同范圍的媒體大小

例如，iphone在samll標志范圍內(nèi)，ipad在big標志范圍內(nèi)等等

可以根據(jù)用戶自己設(shè)置標志范圍和名字：

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

?

?

?##實戰(zhàn)：柵格系統(tǒng)

?如何做到上面一樣的柵格系統(tǒng)呢

簡單啊：

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/RachelChen/p/6648897.html

新人創(chuàng)作打卡挑戰(zhàn)賽發(fā)博客就能抽獎！定制產(chǎn)品紅包拿不停！

總結(jié)

以上是生活随笔為你收集整理的创建一个方便设计的自定义栅格布局的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。