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 追蹤
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題，等你踹共啦！還有機會獲得經典的「偉士牌樂高」喔！馬上來參加本次的活動吧！
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
本篇教學將介紹 renpy 中網格(Grid)的基本造型特性，包括網格的定義、常見造型特性以及使用範例。透過這些內容，讀者可以更瞭解如何在 renpy 中運用網格來製作遊戲畫面。
1.justify-content
用來控制主軸(水平)如何分配對齊
如果要改垂直對齊的話+上 flex-direction : column
2.align-item
他是控制子項目再交叉軸(垂直)的對齊方式
3.flex-shrink
收縮性! 當空間不足時預設會是1，等於是
CSS Box Model
是在 CSS 裡面，html 的每個元素都可被視作為一個盒子，然後可以針對這個盒子去做調整，看以下圖片:
簡單來說margin就是一個是外邊距，與外層元素的間距
Margin 用於控制元素與其周邊元素的間隔，可以設定為正數（增加與其他元素的距離）、負數（減少與其他
這篇文章介紹了CSS Battle每週切版#107的解題方法。它深入講解了使用grid來處理圖案的方法，同時介紹了圖層堆疊、border-radius和z-index的使用。文章中還分享了使用position: relative;調整位置的技巧。本篇文章是前端工程師們進行基礎切版學習和練習的好材料。
這是一篇關於CSS Battle系列的文章，介紹瞭如何通過CSS來處理特定圖案的切版與前端工程技術。文章分享了使用grid和radial-gradient()方法來處理特定圖案的解法以及相關技術總結。
前端工程師需要時不時拿出來打磨基本功。本文分享了從#18問題來提供的CSS Battle的題目作法，並介紹了grid的使用方式，以及nth-of-type的應用。這題算是蠻能鑑別你對基本CSS常用排版的熟悉程度。歡迎大家分享自己的作法與我交流 !
本文介紹CSS Battle題目#73的解法，涵蓋了分層拆解圖形、使用grid排版、調整樣式等基礎技巧。
背景(background)是 CSS 中最常用的功能之一，本文將介紹如何使用 CSS 來設定網頁背景，讓你的網站更加美觀。
您對前端有興趣，對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程，瀏覽器私有前綴及處理，開發者對新特性漸進增強，優雅降級處理，Web標準定義、作用等。
網格（Grid）是一個既普遍又隱形的存在，它以規則的排列方式存在於我們生活的各個角落。無論是在城市建築中的街區規劃，還是在數字化的屏幕上的像素點，網格都在無聲地將空間分割成方形或矩形的區域，為我們的生活和工作提供組織和結構。
除了實際的建築和數位設計，生活中還有各種各樣的網格存在。櫃子就是一個簡單
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題，等你踹共啦！還有機會獲得經典的「偉士牌樂高」喔！馬上來參加本次的活動吧！
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
本篇教學將介紹 renpy 中網格(Grid)的基本造型特性，包括網格的定義、常見造型特性以及使用範例。透過這些內容，讀者可以更瞭解如何在 renpy 中運用網格來製作遊戲畫面。
1.justify-content
用來控制主軸(水平)如何分配對齊
如果要改垂直對齊的話+上 flex-direction : column
2.align-item
他是控制子項目再交叉軸(垂直)的對齊方式
3.flex-shrink
收縮性! 當空間不足時預設會是1，等於是
CSS Box Model
是在 CSS 裡面，html 的每個元素都可被視作為一個盒子，然後可以針對這個盒子去做調整，看以下圖片:
簡單來說margin就是一個是外邊距，與外層元素的間距
Margin 用於控制元素與其周邊元素的間隔，可以設定為正數（增加與其他元素的距離）、負數（減少與其他
這篇文章介紹了CSS Battle每週切版#107的解題方法。它深入講解了使用grid來處理圖案的方法，同時介紹了圖層堆疊、border-radius和z-index的使用。文章中還分享了使用position: relative;調整位置的技巧。本篇文章是前端工程師們進行基礎切版學習和練習的好材料。
這是一篇關於CSS Battle系列的文章，介紹瞭如何通過CSS來處理特定圖案的切版與前端工程技術。文章分享了使用grid和radial-gradient()方法來處理特定圖案的解法以及相關技術總結。
前端工程師需要時不時拿出來打磨基本功。本文分享了從#18問題來提供的CSS Battle的題目作法，並介紹了grid的使用方式，以及nth-of-type的應用。這題算是蠻能鑑別你對基本CSS常用排版的熟悉程度。歡迎大家分享自己的作法與我交流 !
本文介紹CSS Battle題目#73的解法，涵蓋了分層拆解圖形、使用grid排版、調整樣式等基礎技巧。
背景(background)是 CSS 中最常用的功能之一，本文將介紹如何使用 CSS 來設定網頁背景，讓你的網站更加美觀。
您對前端有興趣，對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程，瀏覽器私有前綴及處理，開發者對新特性漸進增強，優雅降級處理，Web標準定義、作用等。
網格（Grid）是一個既普遍又隱形的存在，它以規則的排列方式存在於我們生活的各個角落。無論是在城市建築中的街區規劃，還是在數字化的屏幕上的像素點，網格都在無聲地將空間分割成方形或矩形的區域，為我們的生活和工作提供組織和結構。
除了實際的建築和數位設計，生活中還有各種各樣的網格存在。櫃子就是一個簡單