iT邦幫忙

DAY 36
9

CSS沒有極限系列 第 32

淺談CSS Grid system

  • 分享至 

  • xImage
  •  

相信許多設計師或是工程師都有用過bootstrap,他是一套Css framework,裡面提供相當大量的樣式讓使用者可以撰寫較少的CSS就可以獲得不錯的效果。
而他不只有許多視覺上的樣式,他也包含了排版專用的grid system (grid system並不是bootstrap提出的,只是拿它做範例比較容易),grid system顧名思義就是網格系統,他將畫面分隔一塊一塊,然後頁面內容再依需求大小放進這一格一格內。

CSS範例:http://ashareaday.wcc.tw/#2013-10-21
相信許多設計師或是工程師都有用過bootstrap,他是一套Css framework,裡面提供相當大量的樣式讓使用者可以撰寫較少的CSS就可以獲得不錯的效果。

http://getbootstrap.com/

而他不只有許多視覺上的樣式,他也包含了排版專用的grid system (grid system並不是bootstrap提出的,只是拿它做範例比較容易),grid system顧名思義就是網格系統,他將畫面分隔一塊一塊,然後頁面內容再依需求大小放進這一格一格內。

參考:http://960.gs/demo.html

Grid system 與 RWD
這樣的構想與自適應網頁(Responsive Web Design)結合,就會出現類似bootstrap的css framework。通常網格系統會提供12或是16的column做選擇,每一個column是固定比例大小,而網頁內容選擇不同的column大小來進行網頁排版,在透過CSS3 的media query調整每個column的大小達到自適應網頁。
範例:http://getbootstrap.com/css/#grid

CSS framework 的 Grid system的運作方式
首先,先來看個範例。

...
<div class="row">
  <div class="col2">col2</div>
  <div class="col2">col2</div>
  <div class="col2">col2</div>
  <div class="col6">col6</div>
</div>
<div class="row">
  <div class="col4">col4</div>
  <div class="col2">col2</div>
  <div class="col6">col6</div>
</div>
...

它的結構類似上面,row代表橫向,column (col)代表垂直,每一個row裡面必須包含數字總和為12的column,如果需要換一個橫列,也就必須開一個新的row。
擁有grid system的framework相當多,運作方式也有所不同,但大致上都脫離不了這個概念。

CSS framework 的 Grid system的小問題
Grid system是一個概念,CSS framework是為了讓使用者寫更少的CSS同時兼容各瀏覽器,這樣的情況下發生了html code相當長的小問題。
究竟有多長呢?大概只比table寫網頁短一點吧。


上一篇
CSS3 垂直文字書寫
下一篇
CSS - 伸縮自如的Flex box
系列文
CSS沒有極限41
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0

我要留言

立即登入留言