CSS Grid通过display: grid实现二维布局，使用grid-template-columns/rows定义行列，gap设置间距，grid-area控制子元素位置，支持命名区域与响应式设计，适合复杂页面结构。
CSS Grid 是实现多行多列复杂布局最强大的工具之一。它允许你在一个二维平面上精确控制行和列的分布，非常适合构建仪表盘、卡片网格、表单排版等复杂结构。
定义基本网格容器
要使用 Grid 布局，先将父元素设为
display: grid
，然后通过
grid-template-columns
和
grid-template-rows
定义行列结构。
示例：
使用 grid-area 精确控制子元素位置
每个子元素可以通过
grid-column
和
grid-row
指定起始和结束线，或直接用
grid-area
一次性定义。
常用属性说明：
grid-column: 1 / 3;
—— 占据第1到第3条垂直线（跨两列）
grid-row: 2 / 4;
—— 占据第2到第4条水平线（跨两行）
grid-area: 2 / 1 / 3 / 4;
—— 行起/行终/列起/列终
实用技巧：命名区域更直观
立即学习
“
前端免费学习笔记（深入）
”；
这种方式让布局结构一目了然，适合页面级框架设计。
Midjourney AI 提示词工具
PHP中文网提供Midjourney AI 提示词在线生成工具，专为解决 AI 绘画“词穷”痛点而生，用户只需输入“一只猫”等简单想法，工具便能利用 AI 智能扩展出包含艺术风格、光影构图、镜头参数及负面提示词的专业级英文 Prompt。它完美兼容 Midjourney V8.1 及 Niji 模型，支持一键复制与参数自动优化，大幅降低创作门槛，是提升出图质量与效率的必备辅助神器。
下载
响应式与自动填充策略
在实际项目中，常配合
minmax()
和
repeat()
实现灵活
响应式布局
。
例如创建一个自适应卡片网格：
这表示：自动重复列，每列最小250px，最大为1fr（均分剩余空间），屏幕变窄时自动换行。
结合
@media
查询可进一步优化不同设备下的表现：
基本上就这些核心方法。掌握好容器定义、区域划分和响应式策略，就能轻松应对大多数复杂布局需求。关键是理解网格线和轨道的概念，多练习几次就能熟练运用。不复杂但容易忽略细节，比如 gap 不包含在 grid 高度内，或者 grid-area 必须确保命名一致。
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* 三列，中间列是两边的两倍宽 */
grid-template-rows: 100px auto 80px; /* 三行，高度分别为100px、自适应、80px */
gap: 10px; /* 行列间距 */
}.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-rows: 60px 1fr 50px;
grid-template-columns: 200px 1fr 1fr;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
}@media (max-width: 768px) {
.container {
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
grid-template-columns: 1fr;
}
}