大家好，我是讯享网，很高兴认识大家。



 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <p>在现代网页设计中&#xff0c;布局的灵活性和美观性至关重要。随着需求的不断变化&#xff0c;CSS 网格布局&#xff08;CSS Grid Layout&#xff09;作为一种新兴的布局方式&#xff0c;正在成为开发者们的首选工具。它能够轻松创建复杂的网格结构&#xff0c;使得网页设计更加高效和便捷。</p> 

讯享网

CSS 网格布局是一个强大的二维布局系统，可以同时控制元素在水平和垂直方向上的排列。与传统的布局方式（如 和 ）相比，网格布局为开发者提供了更高的灵活性和精确的控制能力。

在网格布局中，设计师可以定义网格的行和列，并将内容放置在特定的网格单元中。这使得在创建响应式设计时，可以轻松适应不同的屏幕尺寸和设备。

在网格布局中，我们首先需要定义一个网格容器。通过设置，任何元素都可以变成网格容器。容器中的子元素被称为网格项目。

讯享网

• 网格容器（Grid Container）：通过设置 display 属性为 grid 或 inline-grid，将元素变为网格容器。
• 网格项（Grid Item）：网格容器内的直接子元素称为网格项。
• 网格线（Grid Line）：构成网格结构的分界线，可以是水平的或垂直的。
• 网格轨道（Grid Track）：相邻两条网格线之间的空间称为网格轨道，可以是行轨道或列轨道。
• 网格区域（Grid Area）：由四条网格线围成的空间称为网格区域。
• 网格单元（Grid Cell）：指网格（虚拟框架）的一个单元。
• 网格线编号（Grid Number）：网格线的每条编号。
• 网格间距（Grid Gap）：网格单元之间的间隙（上、下、左、右可调）。

网格容器具有多种属性，用于控制行、列、间隙以及整体布局细节。

1、display 属性

使用 将元素指定为网格布局容器：

• 取值： |
• 意义：
  • 定义为块级网格布局
  • 定义为行内网格布局

讯享网

2、grid-template-columns 和 grid-template-rows

这两个属性用于定义网格的列和行。你可以指定每列或每行的宽度和高度，甚至可以使用单位来表示比例单位。

• 取值：各种长度单位（如 px, %, fr）
• 意义：定义网格的列宽和行高。可使用 、、 等简化定义

repeat()：你可以使用 函数简化代码，特别是当列数较多时

讯享网

auto-fill / auto-fit：如果希望列或行自动填充，可以使用 或

fr：代表“fraction”，用于指定比例关系

讯享网

minmax()：用于设定长度范围

auto：表示由浏览器自己决定长度

讯享网

网格线名称：属性和属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用

3、grid-gap（或 gap）

属性用于设置网格单元之间的间距，包括行间距 ( ) 和列间距 ( )。这样可以轻松管理项目之间的空间。

• 取值：
• 意义：设置行与行、列与列之间的间距

讯享网

4、grid-template-areas

通过使用，你可以为网格中的特定区域命名，这使得在布局时更直观。区域名称可以在 CSS 中使用，以便将网格项目放置在指定区域。

• 取值：字符串格式
• 意义：定义布局区域，便于指定不同项目在网格中的位置

注意：如果某些区域不需要，则使用“点”（）表示。

5、grid-auto-flow

定义项目的放置顺序，默认值为 （先行后列）：

• 取值: | | |
• 意义: 指定项目在网格中的自动排列顺序

讯享网

6、justify-items 和 align-items

这两个属性用于设置项目在单元格中的对齐方式：

• 取值: | | |
• 意义: 定义项目在单元格内的水平和垂直对齐方式

place-items 属性：是属性和属性的合并简写形式。

7、justify-content 和 align-content

用于设置整个内容区域在容器中的对齐方式：

• 取值: | | | | |
• 意义: 设置整个网格内容在容器中的对齐方式。

讯享网

place-content 属性是：属性和属性的合并简写形式。

8、grid-auto-columns 和 grid-auto-rows

用于定义自动生成的行高和列宽：

9、grid-template 和 grid

• grid-template 属性：是、和这三个属性的合并简写。
• grid 属性：是、、、 、、这六个属性的合并简写。

网格项目也可以使用一些属性来控制它们在网格中的表现。

1、grid-column 和 grid-row

这两个属性可以让你指定项目所占的列和行。你可以使用关键字来控制跨越的行和列数。

• 取值：
• 意义：合并指定列或行的起止位置

讯享网

注意：关键字，表示跨越多少个网格。

grid-row-start 和 grid-row-end

• 取值：网格线编号或名称
• 意义：指定项目在行的起始和结束位置

grid-column-start 和 grid-column-end

• 取值：网格线编号或名称
• 意义：指定项目在列的起始和结束位置

讯享网

2、grid-area

使用可以将项目放置在之前定义的网格区域中：

• 取值： 或区域名称
• 意义：指定项目所占区域

3、justify-self 和 align-self

这两个属性用于设置单个项目在单元格内的对齐方式：

• 取值： | | |
• 意义：定义单个项目在单元格内的对齐方式

讯享网

4、place-self

是 和 的合并简写：

下面是一个简单的示例，展示如何使用网格布局创建一个基本的网页结构：

讯享网

CSS 网格布局为网页设计带来了前所未有的灵活性和简洁性。通过灵活的行列配置和简洁的语法，你可以轻松创建复杂的布局，而无需担心传统布局方式中的各种问题。无论是响应式设计还是复杂的网格结构，网格布局都能够满足你的需求。

原文地址