CSS入門-Day8：佈局（三）
網格佈局（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
查看全部
你可能也想看
1.加權指數與櫃買指數
週五的加權指數在非農就業數據開出來後，雖稍微低於預期，但指數仍向上噴出，在美股開盤後於21500形成一個爆量假突破後急轉直下，就一路收至最低。 台股方面走勢需觀察週一在斷頭潮出現後，週二或週三開始有無買單進場支撐，在沒有明確的反轉訊號形成前，小夥伴盡量不要貿然抄底，或是追空
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎？
新版式整體視覺上「更加凸顯圖片」，為了搭配這次的更新，我們推出首次貼文策展 ❤️
使用貼文功能並完成這次的指定任務，還有機會獲得富士即可拍，讓你的美好回憶都可以用即可拍珍藏！
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
在 CSS 的開發過程中，重複使用如顏色、字體大小等值是常見的需求。為了提高程式碼維護性和靈活性，就需要用到 CSS 變量了，CSS 變量可以讓你在樣式表中儲存可重用的值。本文將介紹 CSS 變量的概念、使用方法，以及它對撰寫 CSS 的影響。
本文將介紹 CSS 中的兩個重要概念：偽類與偽元素。通過理解和運用這些概念，你可以更好的控制網頁的樣式和佈局。
背景(background)是 CSS 中最常用的功能之一，本文將介紹如何使用 CSS 來設定網頁背景，讓你的網站更加美觀。
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。
本篇為隨筆紀錄，將看完的影片疏理為短小筆記 。
特別有感的是，現在回頭看，發現影片中每個提及的知識點或是誤區自己都踩過好幾輪了，這是在學習及練習中很常會反覆發生、需要注意的地方，提醒自己在接下來的練習中，能將老師提及的思維及作法吸取並應用。
本篇將不同 Sass 學習資源彙整在此，作爲學習筆記，大多來自 w3schools 和六角學院，相關連結也一並記錄下來，以便可以隨時查看、更新。
1.加權指數與櫃買指數
週五的加權指數在非農就業數據開出來後，雖稍微低於預期，但指數仍向上噴出，在美股開盤後於21500形成一個爆量假突破後急轉直下，就一路收至最低。 台股方面走勢需觀察週一在斷頭潮出現後，週二或週三開始有無買單進場支撐，在沒有明確的反轉訊號形成前，小夥伴盡量不要貿然抄底，或是追空
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎？
新版式整體視覺上「更加凸顯圖片」，為了搭配這次的更新，我們推出首次貼文策展 ❤️
使用貼文功能並完成這次的指定任務，還有機會獲得富士即可拍，讓你的美好回憶都可以用即可拍珍藏！
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
在 CSS 的開發過程中，重複使用如顏色、字體大小等值是常見的需求。為了提高程式碼維護性和靈活性，就需要用到 CSS 變量了，CSS 變量可以讓你在樣式表中儲存可重用的值。本文將介紹 CSS 變量的概念、使用方法，以及它對撰寫 CSS 的影響。
本文將介紹 CSS 中的兩個重要概念：偽類與偽元素。通過理解和運用這些概念，你可以更好的控制網頁的樣式和佈局。
背景(background)是 CSS 中最常用的功能之一，本文將介紹如何使用 CSS 來設定網頁背景，讓你的網站更加美觀。
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。
本篇為隨筆紀錄，將看完的影片疏理為短小筆記 。
特別有感的是，現在回頭看，發現影片中每個提及的知識點或是誤區自己都踩過好幾輪了，這是在學習及練習中很常會反覆發生、需要注意的地方，提醒自己在接下來的練習中，能將老師提及的思維及作法吸取並應用。
本篇將不同 Sass 學習資源彙整在此，作爲學習筆記，大多來自 w3schools 和六角學院，相關連結也一並記錄下來，以便可以隨時查看、更新。