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

為了達成這種優化，有以下幾種做法：

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：控制自動佈局的方向和順序

閱讀更多

網頁切版中很常遇到一個問題：當圖片大小不一致時，如何讓圖片在不變形的情況下自適應容器大小？圖片變形不僅會影響網頁的美感和視覺效果，甚至影響使用者閱讀。本篇介紹兩個方法來解決這個問題

閱讀更多

在開發響應式網站（Responsive Web Design）常會需要製作等比例寬高圖片，不管螢幕尺寸如何縮放，圖片都能保持在固定比例，做法蠻多，以下列出其中兩種做法：

閱讀更多