CSS入門-Day8：佈局（三）
閱讀時間約 7 分鐘
網格佈局（CSS Grid）
CSS Grid 是一種強大而靈活的二維佈局系統，適用於更複雜的網頁佈局。它可以同時處理行和列，並提供精確的控制。
基本概念
- Grid 容器：設置
display: grid或display: inline-grid的元素稱為 Grid 容器。 - Grid 項目：Grid 容器的子元素自動成為 Grid 項目。
.container {
display: grid;
}
Grid 容器屬性
grid-template-columns 和 grid-template-rows
定義列和行的大小，可以使用固定值（如 px、%）或彈性單位（如 fr）。
.container {
display: grid;
grid-template-columns: 100px 200px 1fr;
grid-template-rows: 50px 1fr 2fr;
}
grid-column-gap 和 grid-row-gap
設置列與列、行與行之間的間距。
.container {
grid-column-gap: 10px;
grid-row-gap: 15px;
}
grid-template-areas
使用名稱來定義網格區域，這樣可以更方便地排列和管理項目。
.container {
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}
Grid 項目屬性
grid-column 和 grid-row
設置項目跨越的行數和列數。
.item {
grid-column: 1 / 3; /* 從第一列開始到第三列 */
grid-row: 2 / 4; /* 從第二行開始到第四行 */
}
grid-area
指定項目所屬的網格區域名稱。
.item {
grid-area: header;
}
網格佈局實踐
通過一個示例來實踐 Grid 的基本用法。
示例
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid 實踐示例</title>
<style>
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px;
grid-column-gap: 10px;
grid-row-gap: 15px;
}
.item {
background-color: lightblue;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
</body>
</html>
Grid 排版案例
下面是一個更複雜的 Grid 排版案例，展示了使用命名網格區域和跨行、跨列的用法。
案例
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid 排版案例</title>
<style>
.container {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
gap: 10px;
height: 100vh;
}
.header {
grid-area: header;
background-color: lightcoral;
}
.sidebar {
grid-area: sidebar;
background-color: lightseagreen;
}
.main {
grid-area: main;
background-color: lightgoldenrodyellow;
}
.footer {
grid-area: footer;
background-color: lightpink;
}
.item {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="header item">Header</div>
<div class="sidebar item">Sidebar</div>
<div class="main item">Main Content</div>
<div class="footer item">Footer</div>
</div>
</body>
</html>
在這個案例中，我們定義了一個包含頭部（Header）、側邊欄（Sidebar）、主內容區（Main Content）和底部（Footer）的佈局。使用 grid-template-areas 來命名和排列各個區域，使得佈局更易於管理和理解。
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
在 CSS 的開發過程中，重複使用如顏色、字體大小等值是常見的需求。為了提高程式碼維護性和靈活性，就需要用到 CSS 變量了，CSS 變量可以讓你在樣式表中儲存可重用的值。本文將介紹 CSS 變量的概念、使用方法，以及它對撰寫 CSS 的影響。
本文將介紹 CSS 中的兩個重要概念：偽類與偽元素。通過理解和運用這些概念，你可以更好的控制網頁的樣式和佈局。
背景(background)是 CSS 中最常用的功能之一，本文將介紹如何使用 CSS 來設定網頁背景，讓你的網站更加美觀。
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。
本篇為隨筆紀錄，將看完的影片疏理為短小筆記 。
特別有感的是，現在回頭看，發現影片中每個提及的知識點或是誤區自己都踩過好幾輪了，這是在學習及練習中很常會反覆發生、需要注意的地方，提醒自己在接下來的練習中，能將老師提及的思維及作法吸取並應用。
本篇將不同 Sass 學習資源彙整在此，作爲學習筆記，大多來自 w3schools 和六角學院，相關連結也一並記錄下來，以便可以隨時查看、更新。
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
在 CSS 的開發過程中，重複使用如顏色、字體大小等值是常見的需求。為了提高程式碼維護性和靈活性，就需要用到 CSS 變量了，CSS 變量可以讓你在樣式表中儲存可重用的值。本文將介紹 CSS 變量的概念、使用方法，以及它對撰寫 CSS 的影響。
本文將介紹 CSS 中的兩個重要概念：偽類與偽元素。通過理解和運用這些概念，你可以更好的控制網頁的樣式和佈局。
背景(background)是 CSS 中最常用的功能之一，本文將介紹如何使用 CSS 來設定網頁背景，讓你的網站更加美觀。
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。
本篇為隨筆紀錄，將看完的影片疏理為短小筆記 。
特別有感的是，現在回頭看，發現影片中每個提及的知識點或是誤區自己都踩過好幾輪了，這是在學習及練習中很常會反覆發生、需要注意的地方，提醒自己在接下來的練習中，能將老師提及的思維及作法吸取並應用。
本篇將不同 Sass 學習資源彙整在此，作爲學習筆記，大多來自 w3schools 和六角學院，相關連結也一並記錄下來，以便可以隨時查看、更新。