建立一個方便設計的自定義柵格佈局

時間  2019-12-09
標籤 建立 一個 方便 設計 自定義 柵格 佈局 简体版
原文   原文鏈接

 

讓咱們看看如何使用css建立柵格覆蓋（grid overlay），這是響應式的，且很容易用戶自定義，使用的是css變量（和"css custom properties"相對應）。css

grid overlay是開發者的工具，而不是對於用戶而言的。因此咱們不須要過多的擔心瀏覽器兼容問題。可使用postCSS插件cssnext來改變css變量屬性，讓其兼容舊版瀏覽器器。html

##序言：前端

當我適應flex佈局的時候，個人小夥伴看不懂，全部我建立了能夠切換的grid overlay來幫助他們視覺化解說個人佈局，而不須要說抽象的具體寬高或者padding值。瀏覽器

##術語app

做爲前端，儘可能使用前端熟悉的術語：iphone

列column： 頁面的垂直分佈工具

溝gutter： 列之間的空間佈局

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

基準線baseline：做用於文本的垂直rhythmflex

 

 ##建立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;
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程