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 控制。

通用的服务器价目表ui特效

div css制作简单实用的统一定价表，产品分类价格表，服务器价目表介绍ui布局特效。

44

查看详情

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中grid网格布局的介绍的详细内容，更多请关注php中文网其它相关文章！