大匠之風: 2月 2024

在我的【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 排出心目中理想的畫面。

和你分享

大匠之風

網頁

2024/02/17

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

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

自己做 Layout 如何？

HTML

CSS

加入 RWD 吧！

總結

See also