大家好，今天来为大家解答网格布局这个问题的一些问题点，包括也一样很多人还不知道，因此呢，今天就来为大家分析分析，现在让我们一起来看看吧！如果解决了您的问题，还望您关注下本站哦，谢谢~

Grid Container，也叫网格容器，是带有display:grid集合的元素。

.main{ display:grid;}Grid Item，也称为Grid容器成员，是Grid容器下的直接子元素。

Grid Line，Grid容器的行和列的网格线；分为垂直网格线（列网格线）和水平网格线（行网格线）。

网格轨道，两条相邻网格线之间的空间。

Grid Cell，相邻两行和相邻两列网格线之间的空间，基本单位。

网格区域，由四条网格线包围的总空间，可以由任意数量的网格单元组成。

2：浏览器兼容

3：Grid容器 (Grid Container) 属性

常用属性有14个：

显示，分为grid（块级网格）和inline-grid（行级网格）。 } .main { display: 内联网格； }grid-template-columns/rows，定义网格行和列。main{ grid-template-columns: [网格线名称] 网格轨道大小. grid-template-rows: [网格线名称] 网格轨道大小.} 基本语法.main { display: grid; grid -template-columns: [columns-1] 100px [columns-2] 200px 自动； grid-template-rows: [rows-1] 100px [rows-2] 200px;} 2. 重复

.main { 显示：网格；网格模板列：重复(4, 100px [列]) 自动； grid-template-rows: Repeat(4, 100px [rows]);} 3.空闲空间，给定比例，自由分配空间

.main { 显示：网格；网格模板列： 100px 1fr 3fr； grid-template-rows: 100px 1fr 3fr;} grid-template-areas (定义网格模板).header { grid-area: header;背景： #8A469B;}。左{ grid-area: 左； background: #EA7F26;}.right { grid-area: 右； background: #EA7F26;}.footer { grid-area: 页脚；背景： #8A469B;}.main { height: 500px;显示：格； //垂直分为5个grid-template-columns: 100px 100px auto 100px 100px; //水平分为3行grid-template-rows: 100px auto 100px; grid-template-areas: ‘标题标题标题标题”左左。 right’ ‘footer footer footer footer footer’;}grid-template（grid-template-rows、grid-template-column、grid-template-areas 的缩写）.main { height: 500px;显示：格； grid-template: [title-left] ‘标题标题’ 80px [title-right] [content-left] ‘左内容内容’ 1fr [content-right] [footer-left] ‘左页脚页脚’ 80px [footer-right ]/120px 1fr 120px;}grid -column/row-gap（网格线的宽度/高度）.main { display: grid;网格模板列： 100px 200px 自动；网格模板行： 100px 200px；网格列间隙： 20px； grid-row-gap: 20px;}grid-gap（网格线宽度/高度的缩写形式）.main { display: grid;网格模板列： 100px 200px 自动；网格模板行： 100px 200px； grid-gap: 20px 30px;}justify-items（元素在Grid Cell横轴上的对齐方式，前提是元素小于Grid Cell尺寸），它一共有4个值：start 、结束、居中、拉伸（默认）；使用stretch时，需要去掉元素Width，否则无效。main { 显示：网格； justify-items: start;}align-items（元素在Grid Cell纵轴上的对齐方式），与上面的justify-item相同，也有相同的四个属性值。main { 显示：网格； align-items: start;}justify-content（Grid Cell在横轴上的对齐方式），一共有7个值：start、end、center、stretch、space-around、space- Between、space-evenly。main { 显示：网格； justify-content: start;}align-content（Grid Cell在纵轴上的对齐方式），同上。main { 显示：网格； align-content: start;}grid-auto-columns/rows（自动生成网格（隐式），场景：当网格溢出时，子元素超出父元素）基本语法

.main { 显示：网格； grid-auto-columns: 网格轨道大小. grid-auto-rows: 网格轨道大小.} 有两种使用情况：不指定grid-auto-columns 和指定grid-auto-columns。

grid-auto-flow（自动放置Grid容器成员，前提是未指定grid-template-areas，且未指定每个元素的放置方式），它有三个值：row（按行填充）、column （按列填充），密集（按照最小剩余空间填充）。 main { display: grid; grid-auto-flow: row;} grid（模板行、模板列、模板区域、自动行、自动列、自动流缩写）.main { grid: [row1-start] ‘header header header’ 1fr [row1-end] [row2-start] ‘footer footer footer’ 25px [row2-end]/auto 50px auto;}

4：Grid容器成员 (Grid Item) 属性

常用属性有9个：

grid-column-start/end（根据网格线确定Grid Item位置），它有四个值：number、name、span number（跨越多少条网格线）、span name（跨越到哪个grid））。main { 显示：网格；网格模板列： 100px 100px 100px； grid-template-rows: 100px 100px 100px;}.item { grid-column-start: 2; grid-column-end: span 4;}grid-row-start/end（根据网格线确定网格项位置）.main { display: grid;网格模板列： 100px 100px 100px； grid-template-rows: 100px 100px 100px;}.item { grid-row-start: 跨度2; grid-row -end: 4;}grid-column/row（grid-column/row-start/end 缩写）.main { display: grid;网格模板列： 100px 100px 100px；网格模板行： 100px 100px 100px； }.item { grid-column: 跨度2/4; grid-row: 1/4;}grid-area（创建区域），分为两种情况：命名引用和直接定义。命名参考