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

基本概念

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

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

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

一旦定義了網格，就可以將內容放置在網格中。這可以通過 grid-column 和 grid-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