当前位置：首页 > news >正文

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

news 2026/5/11 23:57:11

现代布局——Grid 网格布局（二维布局首选）

第一节：Grid 核心概念

1.1 Grid vs Flexbox

Flexbox：一维布局（行或列），适合“线性排列”；

Grid：二维布局（行+列），适合“网格状排列”；

核心场景：页面整体结构、复杂卡片网格、需要同时控制行和列的布局。

1.2 Grid 核心术语

Grid容器：设置display: grid的元素；

Grid项目：容器的直接子元素；

网格线：划分网格的水平线/垂直线（从1开始计数）；

网格轨道：两条网格线之间的空间（行/列）；

网格单元格：行和列交叉的最小单位；

网格区域：多个单元格组成的矩形区域。

第二节：Grid容器的核心属性

属性	作用	常用取值
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	单元格内垂直对齐	同上

2.1 核心实战1：基础网格（3列2行）

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>

2.2 核心实战2：页面整体布局（Grid Areas）

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项目的核心属性

属性	作用	示例
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	单个单元格垂直对齐	同上

3.1 实战：项目跨行列

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>

第四节：布局方案选择指南与综合实战

4.1 布局方案选择优先级

简单布局（单行/单列）→ Flexbox；
复杂布局（行+列）→ Grid；
精准定位（弹窗/吸顶）→ Position；
兼容老旧浏览器 → 浮动+定位。

4.2 综合实战：电商首页布局（Grid+Flex结合）

需求：

✅ 头部：Logo（左）+ 导航（中）+ 登录按钮（右）→ Flex；

✅ 主体：轮播图（全宽）+ 商品分类（左）+ 商品列表（右，网格）→ Grid+Flex；

✅ 底部：版权信息（居中）→ Flex；

核心代码框架：

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>