css中grid网格布局的介绍

CSS Grid 是一种强大的二维布局工具，适用于创建结构清晰、响应迅速的网页布局。通过 display: grid 启用网格容器后，可使用 grid-template-columns 和 grid-template-rows 定义行列轨道，结合 fr 单位与 minmax() 实现弹性尺寸。利用 gap、row-gap、column-gap 设置网格间距，提升视觉效果。通过 grid-column 与 grid-row 按线条编号定位项目，或使用 grid-area 配合 grid-template-areas 以命名区域方式直观构建页面结构，如头部、侧边栏与主内容区布局，支持响应式设计且结构清晰。

如果您希望在网页中创建结构清晰、响应迅速的二维布局，CSS Grid 网格布局是一种强大且灵活的工具。它允许您通过行和列的组合精确控制元素的位置与大小。

本文运行环境：MacBook Pro，macOS Sonoma

一、Grid 布局的基本概念

CSS Grid 布局是一种二维布局系统，能够同时处理行和列。与 Flexbox 不同，Grid 更适合整体页面布局或复杂模块设计。通过将容器定义为网格容器，其子元素会自动成为网格项，并可通过命名区域、线条编号或函数进行定位。

二、定义网格容器

要启用 Grid 布局，必须先将一个元素设置为网格容器。这通过设置 display 属性实现，一旦应用，其直接子元素将参与网格布局。

1、在 CSS 中选择目标容器，添加 display: grid; 或 display: inline-grid;。

2、display: grid 使其成为块级网格容器，占据整行宽度。

3、display: inline-grid 则生成内联级别的网格，仅占用所需空间。

三、设置行与列轨道

网格的结构由行和列的尺寸决定，使用 grid-template-columns 和 grid-template-rows 可以明确定义每条轨道的大小。

1、使用固定单位如 px 设置列宽，例如：grid-template-columns: 100px 200px 100px; 创建三列。

2、使用 fr 单位分配可用空间，例如：grid-template-columns: 1fr 2fr; 将容器分为三等份，第二列占两份。

3、结合 minmax() 函数设定弹性范围，如：grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 实现响应式列宽。

四、创建网格间隙

为了提升可读性和视觉效果，可以在行与列之间添加间距。使用 gap 属性统一设置行列间隔，或分别用 row-gap 和 column-gap 控制。

1、设置统一间隙：gap: 10px; 在所有相邻轨道间插入 10px 的空隙。

2、单独控制行间距：row-gap: 15px; 只增加行之间的垂直距离。

3、单独控制列间距：column-gap: 20px; 调整列之间的水平距离。

五、定位网格项目

通过线条编号或命名区域，可以精确控制每个子元素在网格中的位置。使用 grid-column 和 grid-row 指定起始与结束线。

1、指定项目从第2条垂直线开始，到第4条结束：grid-column: 2 / 4;。

2、设置项目跨越两行：grid-row: 1 / 3;。

3、使用 span 关键字简化跨距写法，如：grid-column: 2 / span 2; 表示从第2线开始并跨越两条轨道。

六、使用网格模板区域布局

通过命名区域的方式可以更直观地构建页面结构，尤其适用于头部、侧边栏、主内容区等典型布局场景。

1、在容器上使用 grid-template-areas 定义布局结构，例如：

grid-template-areas: "header header" "sidebar main";

2、为每个子元素设置 grid-area: header; 等名称以匹配模板中的区域名。

3、确保每一行的字符串数量一致，避免布局错乱，未使用的单元格可用点（.）表示空白。

# css  # macbook  # 工具  # mac  # ai  # macos  # 响应式设计  # cos  # 网页布局  # auto  # 字符串  # display  # column  # 是一种  # 适用于  # 运行环境  # 如果您  # 行间  # 所需  # 使其  # 两条  # 并可  # 设置为 

相关栏目： 【 Google疑问12 】 【 Facebook疑问10 】 【 网络优化76771 】 【 技术知识130152 】 【 IDC云计算60162 】 【 营销推广131313 】 【 AI优化88182 】 【 百度推广37138 】 【 网站推荐60173 】 【 精选阅读31334 】

相关推荐： Python模块的__name__属性如何由导入方式决定？  php错误怎么开启_display_errors与log_errors的设置【汇总】  Win11怎么开启游戏模式_Win11优化游戏帧数性能【教程】  如何在Golang中处理二进制数据_Golang io与encoding/binary二进制操作方法  Win10怎样卸载DockerDesktop_Win10卸载DockerDesktop步骤【步骤】  Win11怎么设置虚拟内存_Windows 11优化内存性能提升速度【技巧】  C#如何使用Channel C#通道实现异步通信  Go 中 defer 在 goroutine 内部不生效的原因与执行时机详解  Windows10蓝屏SYSTEM_SERVICE_EXCEPTION_Win10驱动冲突排查  Linux如何安装Tomcat应用服务器_Linux环境部署与端口修改【教程】  Win11怎么查看激活状态_查询Windows 11是否已永久激活【详解】  Mac的“预览”如何合并多个PDF_Mac文件处理技巧【效率】  Win11怎么检查TPM2.0模块_Windows11受信任平台模块开启状态查询  如何在 Pandas 中按元素交集合并两列字符串  Win11搜索栏无法输入_解决Win11开始菜单搜索没反应问题【技巧】  Win10 BitLocker加密教程 Win10给磁盘驱动器上锁【安全】  Windows10无法连接到Internet_Win10网络重置命令详解  Python 中将 ISO 8601 时间戳转换为日期并计算日期差值的完整教程  Win11怎么关闭小组件_Win11禁用任务栏天气与小组件方法【设置】  Win11文件扩展名怎么显示_Win11查看文件后缀名设置【基础】  Go 中 defer 语句在 goroutine 内部不返回时不会执行  Win11怎么修复系统文件_使用sfc命令修复Win11系统【技巧】  Win11怎么更改系统语言_Win11中文语言包下载与安装【指南】  ACF 教程：如何正确更新嵌套在多层 Group 字段内的子字段  MAC怎么截图并快速编辑_MAC自带截图快捷键与标注工具使用【方法】  Win11如何设置计划任务 Win11定时执行程序教程【详解】  Python集合操作技巧_高效去重解析【教程】  Win11怎么设置环境变量_Win11配置Path路径变量【详解】  如何使用Golang构建简易投票统计功能_Golang投票数据汇总与展示示例  如何在Golang中实现RPC异步返回_Golang RPC异步处理与回调方法  Windows10电脑怎么查看硬盘通电时间_Win10使用工具检测磁盘健康  c++中如何进行二进制文件读写_c++ read与write函数用法  如何用::实现单例模式_php静态方法与作用域操作符应用【技巧】  MAC如何快速搜索大文件_MAC磁盘空间分析与冗余数据清理【方法】  微信里的php文件怎么变mp4_微信接收php转mp4操作步骤【操作】  Win11开始菜单打不开_修复Windows 11点击开始图标无响应【教程】  Win11怎么更改输入法顺序_Win11调整语言首选位置【设置】  Linux怎么实现内网穿透_Linux安装Frp客户端与服务端配置【方法】  Mac怎么设置登录项_Mac管理开机自启动程序【教程】  Mac的访达（Finder）怎么用_Mac文件管理入门教程【详解】  Win11怎么设置快速访问_Windows11文件资源管理器主页  PHP 中如何在函数内持久化修改引用变量的指向  Win11怎么关闭透明效果_Windows11个性化颜色关闭透明  PythonPandas数据分析教程_数据清洗与处理技巧  Win11怎样安装剪映专业版_Win11安装剪映教程【步骤】  c# Task.ConfigureAwait(true) 在什么场景下是必须的  Win11系统更新后黑屏怎么办 Win11更新黑屏修复教程【方法】  Mac如何调整Dock栏大小和位置_Mac程序坞个性化设置  如何在Golang中使用time处理时间_Golang time时间解析与格式化方法  PhpStorm怎么调试PHP代码_PhpStorm断点设置与调试启动步骤【指南】 

 2025-12-20