css中grid布局的使用

CSS Grid布局通过定义容器、行列尺寸、网格线定位、隐式轨道和区域命名实现复杂二维布局。1、设置display: grid启用布局；2、用grid-template-columns/rows定义列宽行高，支持repeat()函数；3、通过grid-column/row-start/end或简写属性按网格线定位项目；4、超出范围时由grid-auto-rows/columns和grid-auto-flow控制隐式轨道；5、使用grid-template-areas命名区域并结合grid-area分配子元素，提升可读性与灵活性。

如果您希望在网页中创建复杂的二维布局结构，CSS Grid 布局是一种强大且灵活的工具，能够同时处理行和列的排列。以下是使用 CSS Grid 布局的具体方法：

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

一、定义网格容器

要启用 Grid 布局，必须先将一个元素设置为网格容器，其直接子元素会自动成为网格项。通过设置 display: grid 或 display: inline-grid 可实现。

1、在 CSS 中选择目标父元素，并为其添加 display: grid 属性。

立即学习“前端免费学习笔记（深入）”；

2、例如：.container { display: grid; }，此时该容器内的所有直接子元素将按网格进行排列。

二、设置行与列的尺寸

通过 grid-template-columns 和 grid-template-rows 属性可以明确定义网格的列宽和行高，从而构建所需的布局结构。

1、使用 grid-template-columns 设置每列的宽度，例如：grid-template-columns: 100px 200px 1fr 表示三列，前两列为固定像素，第三列占据剩余空间。

2、使用 grid-template-rows 设置每行的高度，例如：grid-template-rows: 50px 100px 定义两行的高度。

3、可结合 repeat() 函数简化重复值，如 repeat(3, 1fr) 表示创建三列等分宽度的轨道。

三、使用网格线定位项目

网格线是 Grid 布局中的坐标系统，每个行和列的开始与结束都会生成一条线，可以通过这些线精确控制子元素的位置。

1、为网格项设置 grid-column-start、grid-column-end、grid-row-start 和 grid-row-end 来指定其跨度。

标签： css macbook 工具 mac ai macos cos 代码可读性 排列 grid布局