css3-grid：grid 布局 / 基础使用

一、理解 grid

 

二、理解 css grid 布局

CSS Grid布局是一个二维的布局系统，它允许我们通过定义网格和网格中每个元素的位置和尺寸来进行页面布局。CSS Grid是一个非常强大的布局系统，它不仅可以用于构建网格布局，还可以用于定位元素，并且可以很好地处理复杂的布局。

CSS Grid布局由两个主要的组成部分组成：容器和项目。容器是我们要定义网格的元素，它的display属性必须设置为grid或inline-grid。而项目是容器内的元素，它们被放置在网格中，并占据一个或多个网格单元。

要创建一个网格布局，我们需要先定义一个网格容器，然后使用grid-template-columns和grid-template-rows属性定义行和列的大小和数量。我们还可以使用grid-column和grid-row属性来控制每个项目在网格中的位置。

除了基本的网格布局，CSS Grid还提供了许多其他的布局特性，如重叠元素、自适应大小、对齐和间距等。这使得我们能够使用CSS Grid来创建各种各样的布局，从简单的网格到复杂的响应式布局，以满足不同的设计需求。

CSS Grid布局是一个灵活、强大和易于使用的布局系统，它提供了许多功能来帮助我们创建各种各样的布局。它已经受到了广泛的支持，并且越来越受到前端开发人员的重视。

三、grid布局有哪些核心概念

序号	概念	概念描述
1	网格容器(Grid Container)	包含整个CSS Grid布局的父元素，通过设置该元素的display属性为grid或inline-grid，即可将其定义为网格容器。
2	网格线(Grid Line)	网格容器中划分行列的分割线，可以通过数字或名称进行标识。
3	网格轨道(Grid Track)	两个相邻网格线之间的空间称为网格轨道（可以是行轨道或列轨道），可以通过设置grid-template-columns和grid-template-rows属性来定义。
4	网格单元(Grid Cell)	两个相邻行列网格线交叉形成的方块区域，用于定义网格中的项目。 由四个相邻的网格线所围成的矩形区域，是网格中的基本单位。
5	网格项(Grid Item)	网格容器中的任何元素都可以成为网格项，规定了网格项在网格单元中的位置和大小。 位于网格单元中的内容，可以是任何HTML元素。
6	网格区域(Grid Area)	由多个网格单元组成的矩形区域，用于定义项目的位置和跨度。 可以通过grid-template-areas属性进行定义。
7	网格模板(Grid Template)	通过设置grid-template-columns和grid-template-rows属性来定义网格轨道的大小和数量。 描述网格行数、列数和每个单元格的大小，可以通过grid-template-rows、grid-template-columns和grid-template-areas属性进行定义。
8	网格属性（grid property）	用于控制网格项在网格容器中的位置和大小，包括grid-row、grid-column、grid-row-start、grid-column-start、grid-row-end、grid-column-end等属性。
9	对齐(Alignment)	设置网格项在网格单元中水平和垂直方向的对齐方式，可以分别使用justify-items和align-items属性，也可以使用justify-self和align-self属性分别定义每个网格项的对齐方式。
10	重叠(Overlap)	CSS Grid布局允许网格项在网格单元中互相重叠，这可以通过设置grid-template-areas属性来实现。
理解这些核心概念可以更好地理解和使用CSS Grid布局。

四、浏览器兼容性

不考虑老旧的浏览器已经是可以使用了。

旧版浏览器可能需要添加一些前缀才能支持CSS Grid布局，而新版浏览器已经不需要前缀了。在编写CSS Grid布局时，建议用适当的前缀完成兼容性工作，现在css工具也可以自动添加。

如果您的站点需要支持较老版本的浏览器，可以使用其他CSS布局方式来弥补CSS Grid布局的缺陷。例如，可以使用Flexbox布局或传统的基于表格的布局来实现相应的设计效果。

五、当设置了 grid 布局后，哪些属性将失效

当设置了 grid 布局后，以下属性将失效
序号	属性	备注
1	float
2	clear
3	display: table-cell
4	vertical-align
5	width	通过 grid-template-columns 和 grid-template-rows 定义列和行宽度
6	height	通过 grid-template-columns 和 grid-template-rows 定义列和行高度
7	margin	相关属性（margin-top、margin-right、margin-bottom、margin-left、margin、margin-inline、margin-block）
8	padding	相关属性（padding-top、padding-right、padding-bottom、padding-left、padding、padding-inline、padding-block）
9	display: inline-grid	inline-grid 只能定义单行/单列
以上属性失效是因为 grid 布局已经提供了更加灵活和高效的布局方式

六、grid 常用属性

序号	属性	属性描述
1	display	用于定义网格容器的类型，可以设置为grid或inline-grid
2	grid-template-columns grid-template-rows	用于定义网格的列数和行数，可以使用长度、百分比、auto、minmax()等值进行设置。
3	grid-template-areas	用于定义网格区域，在一个字符串中使用空格分隔每个单元格，可以使用句点（.）表示一个空单元格，使用名称为none的单元格将不被占用
4	grid-template	用于同时定义网格的列数、行数和区域。
5	grid-column-gap grid-row-gap	用于定义网格行和列之间的间隙
6	grid-auto-columns grid-auto-rows	用于定义自动网格的列数和行数，当网格中的单元格无法满足网格模板时，会使用自动网格填充剩余空间。
7	grid-auto-flow	用于定义自动网格的方向，可以设置为row、column或dense。
8	grid-column-start grid-column-end grid-row-start grid-row-end	用于定义单元格的位置，通过网格线的位置进行设置。
9	grid-column grid-row	用于同时定义单元格的开始和结束位置。
10	grid-area	用于为单元格定义一个名称，以便在grid-template-areas属性中进行引用
了解和掌握这些属性可以帮助我们更好地使用CSS Grid布局来实现网页布局。

七、DEMO

布局：大屏方案（grid）_大屏布局方案_snow@li的博客-CSDN博客

八、欢迎交流指正

参考链接

css3-flex布局：基础使用 / Flexbox布局_snow@li的博客-CSDN博客

grid布局详解 - Des李白 - 博客园