2.1 屬性 display: grid
CSS Grid Layout 是一個強大的佈局系統，讓你可以用行和列來創建複雜的網頁佈局。使用 CSS Grid 的主要步驟就是建立一個 Grid 容器。下面我們來看看如何使用屬性 display: grid 來創建一個 Grid 容器並管理其基本的面向。
建立 Grid 容器的基本概念
屬性 display: grid
屬性 display: grid 將一個元素定義為 Grid 容器。這是個基本步驟，讓你可以利用 CSS Grid 的所有功能來佈局元素。
例子：
CSS
.grid-container {
display: grid;
}
Grid 容器的基本元素
使用屬性 display: grid 定義 Grid 容器後，所有這個容器的子元素會自動成為 grid 元素。這樣就可以控制它們在容器內的排列和對齊。
例子：
CSS
.grid-container {
display: grid;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid 容器範例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">元素 1</div>
<div class="grid-item">元素 2</div>
<div class="grid-item">元素 3</div>
</div>
</body>
</html>
代碼解釋：
.grid-container: 使用屬性display: grid定義元素為 Grid 容器。還有添加邊框來使容器視覺上更加突出。.grid-item: 定義 Grid 容器內元素的基本樣式，比如背景色、文字顏色、填充、邊框和文字居中。
2.2 嵌套的 Grid 容器
CSS Grid 的一大優勢之一就是可以創建嵌套的 Grid 容器。這允許你創建複雜的佈局，其中一個 grid 元素可以成為其子元素的 grid 容器。
例子：
CSS
.grid-container {
display: grid;
gap: 10px;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
.nested-grid-container {
display: grid;
gap: 5px;
background-color: #2980b9;
padding: 10px;
}
.nested-grid-item {
background-color: #1abc9c;
padding: 10px;
border: 1px solid #fff;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>嵌套 Grid 容器</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">元素 1</div>
<div class="grid-item">
<div class="nested-grid-container">
<div class="nested-grid-item">嵌套元素 1</div>
<div class="nested-grid-item">嵌套元素 2</div>
</div>
</div>
<div class="grid-item">元素 3</div>
</div>
</body>
</html>
代碼解釋：
-
.nested-grid-container: 使用屬性display: grid定義嵌套的 Grid 容器， 並且添加元素之間的間隙（gap: 5px）和內部填充（padding: 10px）。 -
.nested-grid-item: 定義嵌套 Grid 容器內元素的基本樣式，比如背景色、填充和邊框。
2.3 管理 Grid 容器的行為
屬性 display: grid 也可以用來使用額外的屬性來管理 Grid 容器的行為。例如，屬性 grid-auto-flow 可以控制元素的自動排列。
例子：
CSS
.grid-container {
display: grid;
grid-auto-flow: row;
gap: 10px;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>具有 auto-flow 的 Grid 容器</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">元素 1</div>
<div class="grid-item">元素 2</div>
<div class="grid-item">元素 3</div>
<div class="grid-item">元素 4</div>
<div class="grid-item">元素 5</div>
</div>
</body>
</html>
2.4 在 Grid 容器內使用 Flexbox
在某些情況下，在 grid 元素中使用 Flexbox 可以幫助建立更複雜的佈局。這允許你結合這兩種技術的優勢。
CSS
.grid-container {
display: grid;
gap: 10px;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
.flex-container {
display: flex;
gap: 10px;
}
.flex-item {
background-color: #1abc9c;
padding: 10px;
flex: 1;
text-align: center;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid 容器內的 Flexbox</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item flex-container">
<div class="flex-item">Flex 元素 1</div>
<div class="flex-item">Flex 元素 2</div>
</div>
<div class="grid-item">元素 2</div>
<div class="grid-item">元素 3</div>
</div>
</body>
</html>
代碼解釋：
.flex-container: 使用屬性display: flex定義 grid 元素為 flex 容器。.flex-item: 定義 flex 容器內元素的基本樣式，比如背景色、填充和彈性(flex: 1)。
GO TO FULL VERSION