版面配置詞條 3-12

網格系統Grid System

也常叫做：網格、格線系統、Grid

你可能會這樣說

首頁要放一排服務卡片，做出來每張寬度不一樣、間距也對不齊，換個螢幕尺寸又整個跑版，看起來很業餘。

網格是隱形的對齊線：把頁面切成等寬的欄與固定的間距，所有元素靠上去，版面自然整齊。你不需要懂數學，只要記住「間距一致、欄數固定」。

常用的節奏是：左右外距各 24px、卡片之間 24px、桌機一排三張，螢幕縮小就變兩張、再變一張。

跟 AI 說「用網格排、間距統一 24px」，比說「排整齊一點」有效十倍——因為整齊可以被數字定義。

欄數間距

間距一致、欄數固定，版面自然整齊；螢幕變窄就降欄數，而不是把卡片壓扁。

圖 3-13　改欄數與間距，六張卡片永遠排得整整齊齊。

中文就可以

服務卡片這一區請改用網格排列：
桌機一排三張、平板兩張、手機一張，間距統一 24px。
卡片內距 24px，圖片等高置頂，標題兩行以內。
內容區最大寬 1200px 置中，左右外距至少 24px。
卡片高度不一致時取最高者對齊，底部按鈕貼齊卡片底緣。