CSS Grid 是一種強大的佈局系統，允許開發者以二維方式（行和列）來設計網頁佈局。以下是如何使用 CSS Grid 設計佈局的基本步驟和概念：
- 定義 Grid 容器
首先，將一個元素定義為 Grid 容器，這樣它的子元素就會成為 Grid 項目。
css
复制
.container {
display: grid;
}
- 定義行和列
使用 grid-template-rows 和 grid-template-columns 屬性來定義 Grid 的行和列。
css
复制
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 三列，每列等寬 */
grid-template-rows: 100px 200px; /* 兩行，第一行高度 100px，第二行高度 200px */
}
- fr 單位表示「剩餘空間的一部分」，1fr 表示佔用一份剩餘空間。
- 你可以使用其他單位如 px, %, em 等來定義行和列的大小。
- 間距
使用 grid-gap 或 row-gap 和 column-gap 來設置行和列之間的間距。
css
复制
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 200px;
gap: 10px; /* 行和列之間的間距 */
}
- 放置 Grid 項目
你可以使用 grid-column 和 grid-row 屬性來控制 Grid 項目在 Grid 中的位置。
css
复制
.item1 {
grid-column: 1 / 3; /* 從第 1 列到第 3 列 */
grid-row: 1; /* 在第 1 行 */
}
.item2 {
grid-column: 2 / 4; /* 從第 2 列到第 4 列 */
grid-row: 2; /* 在第 2 行 */
}
- grid-column 和 grid-row 的值可以是數字、span 關鍵字或 auto。
- 自動佈局
如果你不想手動放置每個項目，Grid 會自動將項目放置在可用的單元格中。
css
复制
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
gap: 10px;
}
- repeat(3, 1fr) 表示重複 3 次 1fr，等同於 1fr 1fr 1fr。
- grid-auto-rows 設置自動生成的行的高度。
- 響應式設計
使用媒體查詢來調整 Grid 佈局，以適應不同的屏幕尺寸。
css
复制
.container {
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 600px) {
.container {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 900px) {
.container {
grid-template-columns: 1fr 1fr 1fr;
}
}
- 命名區域
你可以使用 grid-template-areas 來定義命名區域，並將項目分配到這些區域。
css
复制
.container {
display: grid;
grid-template-areas:
“header header header”
“sidebar main main”
“footer footer footer”;
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}
- 對齊和排列
使用 justify-items, align-items, justify-content, 和 align-content 來控制 Grid 項目和整個 Grid 的對齊方式。
css
复制
.container {
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: center; /* 水平對齊 */
align-items: center; /* 垂直對齊 */
}
總結
CSS Grid 提供了極大的靈活性來設計複雜的網頁佈局。通過定義行和列、放置項目、設置間距和對齊方式，你可以輕鬆創建響應式且結構化的佈局。掌握這些基本概念後，你可以進一步探索 Grid 的高級功能，如嵌套 Grid、自動佈局和命名區域等。
https://cssgrid-generator.netlify.app/
https://layout.bradwoods.io/customize
