CSS Layout

CSS 排版是網頁設計與前端開發的核心能力之一。理解並熟練各種排版方式，如: float、flex、grid 等，能協助開發者打造彈性、高效且響應式的畫面布局。透過不同技術的比較與實務應用，能選擇最合適的排版方法解決不同需求。

表格

調整表格格式、邊框、間距等。

浮動

使用 float 屬性讓元素浮動到左側或右側。早期網頁排版的主要方式，適合簡單的左右排列。需要處理父元素高度塌陷問題，不適合複雜的排版，維護性較差。適合用在圖文混排。

定位

控制元素在頁面上的位置。

彈性盒子

使用 flex 建立彈性容器，適合一維排版(水平或垂直)。簡單易用，能輕鬆實現元素的對齊、分佈和排序。支持彈性伸縮，適應不同屏幕大小。適合用在水平或垂直排列的導覽列、按鈕群組等。

格線系統

使用 grid 建立網格容器，適合二維排版(行和列)。可以精確控制元素的排列和大小，並支持複雜的二維排版，適合響應式設計。但語法相對複雜，學習成本較高。適合用在整體頁面排版、Dashboard、Gallery 等。