跳至主要內容
web.dev
  • 網路平台
  • 按照自己的步調深入瞭解網路平台。
  • HTML
  • CSS
  • JavaScript
  • 使用者體驗
  • 瞭解如何打造更優質的使用者體驗。
  • 效能
  • 無障礙功能
  • 身分
  • 瞭解詳情
  • 快速掌握網頁開發相關知識。
  • 瞭解 HTML
  • 瞭解 CSS
  • 瞭解 JavaScript
  • 瞭解成效
  • 瞭解無障礙功能
  • 更多課程
  • 其他資源
  • 探索內容集合、圖案等。
  • AI 與網際網路
  • 探索
  • PageSpeed Insights
  • 圖案
  • Podcast 和節目
  • 開發人員電子報
  • 關於 web.dev
基準主題 網誌 個案研究
/
  • English
  • Deutsch
  • Español – América Latina
  • Français
  • Indonesia
  • Italiano
  • Polski
  • Português – Brasil
  • Tiếng Việt
  • Türkçe
  • Русский
  • עברית
  • العربيّة
  • فارسی
  • हिंदी
  • বাংলা
  • ภาษาไทย
  • 中文 – 简体
  • 中文 – 繁體
  • 日本語
  • 한국어
登入
web.dev
  • 資源
    • 更多
  • 基準主題
  • 網誌
  • 個案研究
  • 網路平台
  • HTML
  • CSS
  • JavaScript
  • 使用者體驗
  • 效能
  • 無障礙功能
  • 身分
  • 瞭解詳情
  • 瞭解 HTML
  • 瞭解 CSS
  • 瞭解 JavaScript
  • 瞭解成效
  • 瞭解無障礙功能
  • 更多課程
  • 其他資源
  • AI 與網際網路
  • 探索
  • PageSpeed Insights
  • 圖案
  • Podcast 和節目
  • 開發人員電子報
  • 關於 web.dev
本頁面由 Cloud Translation API 翻譯而成。
  • 首頁
  • Patterns

版面配置模式

使用現代 CSS API 建構的版面配置模式,有助於建構常用介面,例如資訊卡、動態格線區域和整頁版面配置。
  • 拆解鬆餅
  • 顯示比例圖片資訊卡
  • Container query card
  • Gentle Flex
  • Autobot
  • Pancake stack
  • Clamping card
  • RAM (Repeat, Auto, Minmax)
  • Holy grail layout
  • Fluffy Center
  • Line up
  • Super centered
  • Sidebar says
  • Pop n' Plop
  • Content Center
  • 12-span grid
  • web.dev

    • web.dev

      我們希望能協助您打造美觀、容易存取、快速又安全的網站,希望您和所有使用者都能跨瀏覽器使用。本網站是 Chrome 團隊成員和外部專家撰寫的介紹內容,希望能協助您展開旅程。
  • 提供相片

    • 提報錯誤
    • 查看已知問題
  • 相關內容

    • Chrome 開發人員版
    • Chromium 更新
    • 個案研究
    • Podcast 與節目
  • 追蹤

    • @ChromiumDev 在 X 上運作
    • YouTube
    • LinkedIn 開發人員專用 Chrome
    • RSS
  • 條款
  • 隱私權
  • Manage cookies
  • English
  • Deutsch
  • Español – América Latina
  • Français
  • Indonesia
  • Italiano
  • Polski
  • Português – Brasil
  • Tiếng Việt
  • Türkçe
  • Русский
  • עברית
  • العربيّة
  • فارسی
  • हिंदी
  • বাংলা
  • ภาษาไทย
  • 中文 – 简体
  • 中文 – 繁體
  • 日本語
  • 한국어