iT邦幫忙

2023 iThome 鐵人賽

DAY 29
0

隨著技術的不斷發展,能夠實現更複雜和美觀的設計,引領潮流的技術是網格佈局(Grid Layout)是種用於排列網頁內容的靈,更易於地實現多欄、多行的佈局。

基本概念

  • 容器 (Container):網格佈局始於一個容器元素,通常是網頁的主要內容區域。這個容器使用 display: grid; 屬性來啟用網格佈局。
  • 行 (Row)列 (Column):容器內的網格被劃分為行和列,可以通過 grid-template-rowsgrid-template-columns 屬性來定義它們的大小和數量。
  • 單元格 (Cell):每個網格的交叉點被稱為單元格,可以將內容放置在這些單元格中。
  • 跨越 (Spanning):元素可以跨越多個行或列,這使得設計更具彈性,可以創建各種不同形狀和大小的版面。
  • 對齊 (Alignment):可以控制元素在單元格內的水平和垂直對齊,以確保版面外觀一致。

網格佈局是一種二維佈局系統,它由一個父元素(通常是包含內容的容器)和子元素(需要佈局的內容)組成。可以通過以下方式定義網格

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
}

一旦定義了網格,就可以將內容放置在網格中。這可以通過 grid-columngrid-row 屬性來實現。例如:

.item {
  grid-column: 1 / 3; //從第一列到第三列
  grid-row: 1 / 2;    // 從第一行到第二行
}

優勢

  • 簡單明瞭:網格佈局的語法相對簡單,易於理解和使用,尤其對於初學者來說。
  • 精確控制:開發者可以精確控制元素的位置和大小,無需使用大量的樣式規則。
  • 多樣性:網格佈局適用於各種不同類型的版面,從簡單的網格到複雜的多欄新聞版面都可以實現。
  • 響應式佈局:網格佈局與響應式設計相容,可以輕鬆應對不同螢幕大小和設備。
  • 減少冗餘代碼:相比於使用浮動或定位,網格佈局可以減少冗餘的 HTML 和 CSS 代碼。

參考資料與閱讀更多

MDN Grid Layout
Grid by Example
CSS Grid Layout Module Level 2
A Complete Guide to Grid
Learn CSS Grid


上一篇
Day28 FlexBox 彈性盒子
下一篇
Day30 系列目錄
系列文
切版與CSS:打造工具箱與切版施工流程!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言