2024/02/17

【新手必看】CSS Grid 排版主畫面，從零到一教學！

作者：吳祐賓





在我的【Delphi in Depth DataSnap 網站應用程式全端開發】一書裡提到，主畫面的製作會使用 東西南北發中（EWSNC）的版面配置。這是由於網頁前端沒有像 WinForm framework 般有內建制式的版面配置，若要實現類 WinForm 版面配置就要借助 Layout 概念元件來實現，在 EasyUI 中採用【Layout 布局】，在 ExtJS 則採用 【Border Layout】。

EasyUI Layout 布局

ExtJS Border Layout



傷腦筋，使用多組三方元件時 CSS 就必打架

EasyUI 和 ExtJS 他們都屬於 JavaScript 應用程式框架，他們的差異在於：

  • EasyUI：jQuery 為核心的可佈局元件組，也可讓 Angular, VUE, React 等框架使用
  • ExtJS：MVVM 為設計概念的 JS 框架，從佈局到小元件的使用採一條龍式的完整框架

不論是哪一種，只要使用完整的三方元件解決方案， 他們大多會控制到最底層的 CSS 顯示效果，進而造成彼此間的 CSS 或多或少互相干擾的情形。所以可能的話還是要自己試著寫寫看 CSS Layout，來減少干擾的可能。

自己做 Layout 如何？

Layout 要自己做而不用元件，這很有挑戰性，目標先定在把東西南北中建立起來，至於可隱藏、自由調整寬度等功能就先忽略。

之後就來看看僅用 HTML 和 CSS 如何建立 Border Layout。

HTML

東西南北中佈局，從字面上來看可以知道會有五個格子，HTML 可以寫成以下內容，實際呈現時可以發現它們會從上到下排列。

  <div class="container">
    <header>北</header>
    <nav>東</nav>
    <main>
      中
    </main>
    <aside>西</aside>
    <footer>南</footer>
  </div>



"header" 標籤顧名思義就是佈局最頂端的位置，通常會設立標題在此處。"nav" 標籤用於導覽及連結，常見的是 Tree 元件。"main" 為中間的主要顯示區塊。"aside" 放側邊欄或額外內容。"footer" 放在佈局最底端的內容，通常用於版權宣告。



CSS

東西南北中的佈局方式相當制式，類似於表格，所以可以使用 CSS Grid 排版法進行處理。由於呈現"東西中"及"南北中"交錯，所以 Grid 設為 3 x 3 的方式進行排版。"container" 為圖層最底端，決定在它之上的圖層要怎麼排版。按底下的 CSS 設定完成後應該會像下圖顯示的那般好看。

.container {
  display: grid;
  grid-template-columns: 16rem 1fr 16rem;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "nav content sidebar"
    "footer footer footer";
  min-height: 100dvh;
}

header {
  grid-area: header;
  padding: 2rem;
  background-color: #C5E1A5;
}

nav {
  grid-area: nav;
  padding: 2rem;
  background-color: #90CAF9;
}

main {
  grid-area: content;
  padding: 2rem;
  background-color: #F48FB1;
}

aside {
  grid-area: sidebar;
  padding: 2rem;
  background-color: #FFAB91;
}

footer {
  grid-area: footer;
  padding: 2rem;
  background-color: #FFF59D;
}




"container" 在 "中" 的區塊都用 1fr 將所有剩餘空間給它。關鍵在 "grid-template-areas" 區塊排版內容，這裡使用硬編碼將 3 x 3 的區塊都寫上去，雖然囉嗦了點，但一看就知道整個版型大概的模樣。其它標籤定義 "grid-area" 區塊名稱，grid-template-areas 就是按照 grid-area 進行排版的。

加入 RWD 吧！

既然都自己刻 CSS 了，自動適應畫面也順便一起加上去，就加入手機大小的 RWD 處理。因為手機畫面屬於寬度較短，高度較長，所以就使用由上到下排列的方式進行排版。由於有五個區塊，且資訊顯示的權重也不一樣，所以高度的呈現也有所調整。最後使用 "grid-template-areas" 決定手機版面顯示區塊的順序。畫面應如下顯示。

@media (max-width: 1024px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(5rem, auto) 1fr minmax(5rem, auto) auto;
    grid-template-areas:
      "header"
      "nav"
      "content"
      "sidebar"
      "footer";
  }
}





"grid-template-rows" 對於"東"、"西"兩個區塊使用 minmax(5rem, auto) 限制它最小高度為 5rem，最大高度為 auto。

總結

本篇文章主要講述使用三方廠商的排版解決方案時，可能遇到因為 CSS 設定底層顯示方式不同而產生的衝突問題。若是底層沒有很複雜，自己寫排版畫面或許可以減少三方廠商元件的衝突問題。至於如何開始，這篇的教學內容相信可以讓你很快速地從 0 到 1 排出心目中理想的畫面。

和你分享

See also


沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)