iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 13
2
Modern Web

連續30天的超實務網頁設計的垂直置中教學系列 第 13

使用 Grid + align-items 製作垂直置中區塊

  • 分享至 

  • xImage
  •  

簡言

align-items 不僅是 Flex 可用,連 CSS grid 也擁有此屬性可使用,但在 Flex 中 align-items 是針對次軸(cross axis)作對齊,而在 CSS Grid 中則是針對Y軸作對齊,你可以把他想像成是表格中儲存格的 vertical-align 屬性看待,就可以很容易理解了。

原理說明

CSS grid 這個劃時代的屬性,讓我們對網頁版面的控制變的方便非常非常的多,CSS Grid 跟 Flex 一樣擁有兩個軸像的控制,指示他是格子罷了,所以在 Grid 中我們一樣擁有 align-items 屬性,且此屬性僅是針對Y軸作用,有了這樣的觀念之後,我們可以依循著 Flex 的原理來思考,只要將父層設定為格子(Grid),然後指定此格子的內容對齊Y軸中間即可,雖然 Flex 跟 Grid 似乎很相似,但其實他們之間差異點還是蠻明顯的,一個針對物件流向做設定,偏向於『行或列』的單線設定,一個則是偏向於格狀的排列,只要稍微用心去比較,我想各位應該都能快速上手跟了解的,但不管理解了多少,這東西還真是超級方便阿,是不?

原始碼

HTML

<div class="box box13">
  <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;
  justify-content: center;
  align-items: center; 
}
.content{
  width: 400px;
  background: #ccc;
}

實際示範頁面

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


上一篇
使用 Grid + template 做垂直置中
下一篇
使用 Grid + align-content 做垂直置中
系列文
連續30天的超實務網頁設計的垂直置中教學30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言