CSS

在響應式網頁設計中,常需要處理不同裝置間版面的切換,以表格為例:在桌機上用表格呈現內容,而在行動裝置上使用卡片式版面,這樣的設計優化能夠提升使用者在不同裝置上的瀏覽體驗。

為了達成這種優化,有以下幾種做法:

  1. 製作兩個版面,利用斷點來進行版面切換
  2. 製作一個共用版面,搭配 CSS Grid Layout 進行設計,在手機版時調整 <table> 的屬性,達成卡片的視覺效果

本篇介紹第二個做法,這麼做可以降低程式碼的複雜度,提升程式碼可重用性,專案維護性也較高。

閱讀更多

上一篇文章 介紹了 CSS Grid,接下來運用網格系統來實作瀑布流版面。

瀑布流(Waterfall Flow)是一種網頁佈局的設計方式。瀑布流的特點是將內容項目垂直排列,並根據可用的空間進行自適應調整,形成像瀑布一樣的流動效果 。

瀑布流佈局中,每個元素的寬度通常是固定的,但高度會根據內容的大小變化。這樣可以使元素在垂直方向上緊密堆疊,填滿可用空間。當一列的空間被填滿後,下一個元素會自動排列到空間較少的列中,達到均衡的排版。

透過 CSS Grid 或 Flexbox 可以達成瀑布流佈局的效果,本篇會使用 CSS Grid 搭配 JavaScript 來完成實作。

閱讀更多

CSS Grid 佈局系統能夠幫助我們輕鬆控制網格中元素位置和大小,跟 Flex 比較:

  • Flex:一維佈局系統,主要用於單行或是單列的對齊跟排列
  • Grid:二維網格系統,提供更豐富靈活的佈局控制,同時操控「欄(column)」跟「列(row)」,適合用於複雜度高的網頁版型

常用屬性

外層容器

  • display:定義容器類型(grid / inline-grid / subgrid
  • grid-template-columns:定義網格欄的大小和數量
  • grid-template-rows:定義網格列的大小和數量
  • grid-gap / grid-column-gap / grid-row-gap:設定網格間的間距
  • grid-template-areas:定義網格空間位置,由單個或數個字串組成,搭配 grid-area 使用
  • justify-items / align-items / place-items:定義所有元素的對齊方式,同 flex 用法

內層元素

  • grid-column / grid-column-start / grid-column-end:控制元素在網格中所佔欄空間位置
  • grid-row / grid-row-start / grid-row-end:控制元素在網格中所佔列空間位置
  • grid-area:定義元素空間名稱,搭配 grid-template-areas 使用
  • justify-self / align-self / place-self:定義單一元素的對齊方式,同 flex 用法

元素自動佈局

  • grid-auto-columns:定義預設欄的大小
  • grid-auto-rows:定義預設列的大小
  • grid-auto-flow:控制自動佈局的方向和順序

閱讀更多

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×