iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 12
0

簡言

CSS grid 最令人驚豔的就是這個 template 的功能了,簡直就是把區塊當畫布在使用一般,我們僅需要把樣板設定成三列,就能搞定垂直置中啦。

原理說明

CSS grid是一個網頁劃時代的技術突破,原生的格線系統讓我們能利用 CSS 來對區塊建構隱形的格線,方便我們將內容放置於目標格子內,在這個例子中 Amos 利用 grid-template-rows 將父層區塊分割成三個橫列,接著利用 grid-area 屬性給與子層一個區域(area)名稱,最後在父層使用 grid-template-areas 來把該子層區域放置到我要的「格子」中即可。
以上原理很簡單,但比較容易有疑問的地方在於 grid-template-areas 這個屬性中「值」的設定,這邊其實就是畫格子的概念,當我的格子想預留空值的時候(不分配子層項目),我們可以直接使用一個「.」來作佔位,而 Amos 的這個例子中是建制三欄三列個隔線,所以在 grid-template-areas 中可以看到三列的值,至於欄就以點跟 grid-area 的名稱來處理,這樣就能輕鬆搞定啦,各位可以自己試著修改看看喔。

原始碼

HTML

<div class="box box12">
  <div class="content">
    立馬來看 Amos 實際完成的
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果
    </a>
    效果吧!別忘了拖拉一下視窗看看 RWD 效果喔!
  </div>
</div>

CSS

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: 
    '. . .'
    '. amos .'
    '. . .';
}
.content{
  width: 400px;
  background: #ccc;
  grid-area: amos;
}

實際示範頁面

Line搜尋「@csscoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
本文同步發表於 CSS可樂部落格
CSS coke的Youtube直播頻道
歡迎點擊右側訂閱 CSS coke直播頻道
若有任何問題歡迎留言討論喔
謝謝各位


上一篇
使用 Flex + align-content 來製作垂直置中
下一篇
使用 Grid + align-items 製作垂直置中區塊
系列文
連續30天的超實務網頁設計的垂直置中教學30

尚未有邦友留言

立即登入留言