现代布局——Grid 网格布局二维布局首选第一节Grid 核心概念1.1 Grid vs FlexboxFlexbox一维布局行或列适合“线性排列”Grid二维布局行列适合“网格状排列”核心场景页面整体结构、复杂卡片网格、需要同时控制行和列的布局。1.2 Grid 核心术语Grid容器设置display: grid的元素Grid项目容器的直接子元素网格线划分网格的水平线/垂直线从1开始计数网格轨道两条网格线之间的空间行/列网格单元格行和列交叉的最小单位网格区域多个单元格组成的矩形区域。第二节Grid容器的核心属性属性作用常用取值display转为Grid容器grid块级/ inline-grid行内块grid-template-columns定义列尺寸100px / 1fr / repeat(3, 1fr) / autogrid-template-rows定义行尺寸同列尺寸gap网格间距10px行列/ 10px 20px行/列grid-template-areas定义网格区域header header sidebar main footer footerjustify-items单元格内水平对齐start / center / end / stretchalign-items单元格内垂直对齐同上2.1 核心实战1基础网格3列2行HTMLdiv classgrid-containerdiv classgrid-item1/divdiv classgrid-item2/divdiv classgrid-item3/divdiv classgrid-item4/divdiv classgrid-item5/divdiv classgrid-item6/div/divstyle.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;}/style2.2 核心实战2页面整体布局Grid AreasHTMLdiv classpage-gridheader classheaderHeader/headeraside classsidebarSidebar/asidemain classmainMain Content/mainfooter classfooterFooter/footer/divstyle.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 / 3justify-self单个单元格水平对齐center / start / endalign-self单个单元格垂直对齐同上3.1 实战项目跨行列HTMLdiv classgrid-crossdiv classitem item1跨2列/divdiv classitem item2普通/divdiv classitem item3跨2行/divdiv classitem item4普通/divdiv classitem item5普通/div/divstyle.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 综合实战电商首页布局GridFlex结合需求✅ 头部Logo左 导航中 登录按钮右→ Flex✅ 主体轮播图全宽 商品分类左 商品列表右网格→ GridFlex✅ 底部版权信息居中→ Flex核心代码框架HTMLdiv classshop-pageheader classshop-headerdiv classlogoLogo/divnav classshop-nav导航/navdiv classlogin登录/div/headermain classshop-maindiv classbanner轮播图/divdiv classcategory商品分类/divdiv classgoods-list商品列表Grid/div/mainfooter classshop-footer版权信息/footer/divstyle.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 bannercategory 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核心知识点总结布局分层学习先掌握文档流/浮动/定位传统布局再学习Flex/Grid现代布局循序渐进方案选择逻辑一维布局用Flex二维布局用Grid精准定位用Position简单并排可考虑浮动核心痛点解决Flex彻底解决垂直居中、空间均分问题Grid解决复杂二维布局问题实战原则优先使用现代布局Flex/Grid仅在兼容老旧浏览器时使用传统布局。