前端编程 课程二十一、：CSS布局五

属性

作用

常用取值

display

转为Grid容器

grid（块级）/ inline-grid（行内块）

grid-template-columns

定义列尺寸

100px / 1fr / repeat(3, 1fr) / auto

grid-template-rows

定义行尺寸

同列尺寸

gap

网格间距

10px（行+列）/ 10px 20px（行/列）

grid-template-areas

定义网格区域

"header header" "sidebar main" "footer footer"

justify-items

单元格内水平对齐

start / center / end / stretch

align-items

单元格内垂直对齐

同上

HTML
<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 class="grid-item">6</div>
</div>

<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3列，每列1份 */
grid-template-rows: 100px 200px; /* 2行，高度分别为100/200px */
gap: 10px; /* 网格间距 */
width: 600px;
border: 1px solid #eee;
padding: 10px;
}
.grid-item {
background-color: #e3f2fd;
line-height: 100px;
text-align: center;
}
</style>

HTML
<div class="page-grid">
<header class="header">Header</header>
<aside class="sidebar">Sidebar</aside>
<main class="main">Main Content</main>
<footer class="footer">Footer</footer>
</div>

<style>
.page-grid {
display: grid;
grid-template-columns: 200px 1fr; /* 侧边栏200px，主内容自适应 */
grid-template-rows: 60px 1fr 40px; /* 头部60px，主内容自适应，底部40px */
grid-template-areas:
"header header" /* 头部占2列 */
"sidebar main" /* 侧边栏1列，主内容1列 */
"footer footer"; /* 底部占2列 */
gap: 10px;
height: 100vh; /* 占满视口高度 */
padding: 10px;
box-sizing: border-box;
}
.header {
grid-area: header;
background-color: #2196f3;
color: #fff;
line-height: 60px;
text-align: center;
}
.sidebar {
grid-area: sidebar;
background-color: #ffebee;
padding: 10px;
}
.main {
grid-area: main;
background-color: #e8f5e9;
padding: 10px;
}
.footer {
grid-area: footer;
background-color: #f5f5f5;
line-height: 40px;
text-align: center;
}
</style>

属性

作用

示例

grid-column

控制列位置

grid-column: 1 / 3（跨2列）

grid-row

控制行位置

grid-row: 2 / 4（跨2行）

grid-area

控制区域/位置

grid-area: header / 2 / 1 / 3

justify-self

单个单元格水平对齐

center / start / end

align-self

单个单元格垂直对齐

同上

HTML
<div class="grid-cross">
<div class="item item1">跨2列</div>
<div class="item item2">普通</div>
<div class="item item3">跨2行</div>
<div class="item item4">普通</div>
<div class="item item5">普通</div>
</div>

<style>
.grid-cross {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px);
gap: 10px;
width: 600px;
border: 1px solid #eee;
padding: 10px;
}
.item {
background-color: #e3f2fd;
text-align: center;
line-height: 100px;
}
.item1 {
grid-column: 1 / 3; /* 从第1列线到第3列线，跨2列 */
background-color: #ff4444;
color: #fff;
}
.item3 {
grid-row: 1 / 3; /* 从第1行线到第3行线，跨2行 */
background-color: #00c851;
color: #fff;
}
</style>

HTML
<div class="shop-page">
<header class="shop-header">
<div class="logo">Logo</div>
<nav class="shop-nav">导航</nav>
<div class="login">登录</div>
</header>
<main class="shop-main">
<div class="banner">轮播图</div>
<div class="category">商品分类</div>
<div class="goods-list">商品列表（Grid）</div>
</main>
<footer class="shop-footer">版权信息</footer>
</div>

<style>
.shop-page {
display: grid;
grid-template-rows: 60px 1fr 40px;
height: 100vh;
}
.shop-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.shop-main {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: 200px 1fr;
grid-template-areas:
"banner banner"
"category goods-list";
gap: 10px;
padding: 10px;
}
.banner { grid-area: banner; background: #e3f2fd; }
.category { grid-area: category; background: #ffebee; }
.goods-list {
grid-area: goods-list;
display: grid; /* 商品列表用Grid */
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.shop-footer {
display: flex;
justify-content: center;
align-items: center;
background-color: #f5f5f5;
}
</style>