1. 什么是网格布局CSS 网格布局CSS Grid Layout是一种强大的二维布局系统专为处理网页中的行和列而设计。与传统的浮动布局或弹性盒子Flexbox不同网格布局允许开发者同时在水平和垂直两个方向上精确控制元素的位置和尺寸从而轻松创建复杂、响应式的页面结构。网格布局的核心思想是将一个容器划分为一个个网格单元Grid Cell子项目Grid Item可以放置在这些单元中甚至可以跨越多个行或列。这使得它成为构建现代 Web 应用界面的理想选择。2. 核心概念与术语在深入学习之前让我们先了解几个关键术语网格容器Grid Container通过设置display: grid或display: inline-grid的元素其所有直接子元素自动成为网格项目。网格项目Grid Item网格容器的直接子元素。网格线Grid Line划分网格的垂直线和水平线用于定位项目。它们有数字索引从1开始或自定义名称。网格轨道Grid Track两条相邻网格线之间的空间即行或列。网格单元Grid Cell两条相邻行线和两条相邻列线交叉形成的区域是网格的最小单位。网格区域Grid Area由一个或多个相邻网格单元组成的矩形区域。3. 创建你的第一个网格让我们从一个简单的例子开始创建一个 3x3 的网格.grid-container { display: grid; grid-template-columns: 100px 100px 100px; /* 定义三列每列宽100px */ grid-template-rows: 100px 100px 100px; /* 定义三行每行高100px */ gap: 10px; /* 设置行和列之间的间距 */ } .grid-item { background-color: #4CAF50; color: white; display: flex; align-items: center; justify-content: center; font-size: 1.5em; }div classgrid-container div classgrid-item1/div div classgrid-item2/div div classgrid-item3/div div classgrid-item4/div div classgrid-item5/div div classgrid-item6/div div classgrid-item7/div div classgrid-item8/div div classgrid-item9/div /div这段代码创建了一个等宽等高的 3x3 网格每个项目会自动按顺序填充到网格单元中。4. 强大的布局属性4.1 容器属性grid-template-columns/grid-template-rows定义网格的列和行的大小。可以使用固定值px、百分比、fr单位弹性比例或repeat()函数。grid-template-areas通过命名区域来定义布局模板非常直观。gap设置行与行、列与列之间的间距是row-gap和column-gap的简写。justify-content/align-content控制整个网格内容在容器内的对齐方式当网格总尺寸小于容器时。justify-items/align-items控制所有网格项目在其所在单元格内的对齐方式。4.2 项目属性grid-column-start/grid-column-end/grid-row-start/grid-row-end指定项目占据的网格线范围。grid-column/grid-row上述属性的简写形式如grid-column: 1 / 3;表示从第1列线到第3列线。grid-area可以指定项目占据的命名区域或者作为grid-row-start/grid-column-start/grid-row-end/grid-column-end的简写。justify-self/align-self单独控制某个项目在其单元格内的对齐方式覆盖容器的justify-items和align-items设置。5. 实战构建一个经典博客布局让我们运用所学知识构建一个包含页眉、侧边栏、主内容区和页脚的经典布局.blog-layout { display: grid; grid-template-columns: 1fr 3fr; /* 侧边栏占1份主内容占3份 */ grid-template-rows: auto 1fr auto; /* 页头和页脚自适应中间区域撑满 */ grid-template-areas: header header sidebar main footer footer; min-height: 100vh; gap: 20px; padding: 20px; } .header { grid-area: header; background: #333; color: white; padding: 1rem; } .sidebar { grid-area: sidebar; background: #f4f4f4; padding: 1rem; } .main { grid-area: main; background: #fff; padding: 1rem; } .footer { grid-area: footer; background: #333; color: white; padding: 1rem; }div classblog-layout header classheaderh1我的博客/h1/header aside classsidebar nav ul lia href#首页/a/li lia href#归档/a/li lia href#关于/a/li /ul /nav /aside main classmain article h2欢迎来到我的博客/h2 p这里是使用 CSS 网格布局构建的响应式页面。/p /article /main footer classfootercopy; 2023 我的博客/footer /div通过grid-template-areas我们直观地定义了布局结构并且可以轻松地在不同屏幕尺寸下调整这个模板。6. 响应式设计技巧网格布局与媒体查询Media Queries结合可以轻松创建响应式设计.responsive-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; } /* 在平板设备上调整为两列 */ media (max-width: 768px) { .blog-layout { grid-template-columns: 1fr; grid-template-areas: header main sidebar footer; } }repeat(auto-fit, minmax(250px, 1fr))是一个强大的模式它会自动创建尽可能多的列每列至少 250px 宽并平均分配剩余空间。当容器宽度不足以容纳另一列时项目会自动换行。7. 网格布局 vs 弹性盒子网格布局和弹性盒子是互补的各有侧重弹性盒子Flexbox一维布局擅长处理一个方向行或列上的项目排列、对齐和空间分配。适合组件级布局如导航栏、卡片列表。网格布局Grid二维布局同时控制行和列。适合整体页面布局、复杂的网格状结构。一个常见的模式是使用网格进行宏观页面布局在网格项目内部使用弹性盒子进行微观内容排列。