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 來命名和排列各個區域，使得佈局更易於管理和理解。
分享至
成為作者繼續創作的動力吧！
© 2024 vocus All rights reserved.