display:grid网格布局属性说明

米柆

已于 2025-05-22 08:39:31 修改

阅读量756

点赞数 13

分类专栏： Millia‘s work 文章标签：前端 html css

于 2025-05-16 17:36:05 首次发布

本文链接：https://blog.csdn.net/millia/article/details/148008218

版权

Millia‘s work 专栏收录该内容

59 篇文章

订阅专栏

网格父级：display:grid（网格块 / 网格布局）/ inline-grid（行内网格）

注意：当设置网格块/布局，column、float、clear、vertical-align的属性是无效的。

HTML:
<ul class="ls02">
<li><img src="图片"><span>文字摘要文字</span></a></li>
<li><img src="图片"><span>文字摘要文字</span></a></li>
<li><img src="图片"><span>文字摘要文字</span></a></li>
<li><img src="图片"><span>文字摘要文字</span></a></li>
<li><img src="图片"><span>文字摘要文字</span></a></li>
</ul>


CSS:
<style>
.ls02{display:grid;grid-template-columns:580px 285px 285px;grid-template-rows:160px 160px;justify-content:space-between;gap:20px;}
.ls02 li{position:relative;overflow:hidden;}
.ls02 li:first-child{grid-row:span 2;}/*单独设置第一个元素跨两行*/
.ls02 li span{display:block;position:absolute;left:0;bottom:0;width:100%;background:rgba(0,0,0,0.6);color:#fff;white-space:nowrap;text-align:center;overflow:hidden;text-overflow:ellipsis;padding:10px;box-sizing:border-box;}
</style>

HTML:
<ul class="ls03">
<li><img src="图片"><span>文字摘要文字</span></a></li>
<li><img src="图片"><span>文字摘要文字</span></a></li>
<li><img src="图片"><span>文字摘要文字</span></a></li>
<li><img src="图片"><span>文字摘要文字</span></a></li>
<li><img src="图片"><span>文字摘要文字</span></a></li>
</ul>


CSS:
<style>
.ls03{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(auto-fill,160px);gap:20px;}/*设置列4平分且行高重复160px*/
.ls03 li{overflow:hidden;position:relative;}
.ls03 li span{display:block;position:absolute;left:0;bottom:0;width:100%;background:rgba(0,0,0,0.6);color:#fff;white-space:nowrap;text-align:center;overflow:hidden;text-overflow:ellipsis;padding:10px;box-sizing:border-box;}
</style>

网格父级块 / 布局grid常用属性：

grid-template-columns：每列的列宽。

grid-template-rows：每行的行高。

grid-template-areas：网格区域名称。

grid-template：grid-template-columns、grid-template-rows、grid-template-areas 三个属性的简写。



column-gap：列与列之间的间距，原为：grid-column-gap。

row-gap：行与行之间的间距，原为：grid-row-gap。

gap：列间距和行间距，是column-gap与row-gap的简写，原属性名为：grid-gap。



justify-items：单元格中内容的水平位置（左中右）。

align-items：单元格中内容的垂直位置（上中下）。

place-items：单元格中内容的水平位置和垂直位置，是justify-items和align-items的简写。



justify-content：容器中整体内容的水平位置（左中右）。

align-content：容器中整体内容的垂直位置（上中下）。

place-content：容器中整体内容的水平位置和垂直位置，是justify-content和align-content的简写。

grid-auto-columns：容器中多余网格的列宽。

grid-auto-rows：容器中多余网格的行高。

grid-auto-flow：单元格排列顺序，控制自动放置的网格项如何排列。

grid：该属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow 六个属性的简写。

HTML结构:

<ul class="grid-container">
<li>第一个网格内容</li>
<li>第二个网格内容</li>
<li>第三个网格内容</li>
<li>第四个网格内容</li>
<li>第五个网格内容</li>
<li>第六个网格内容</li>
<li>第七个网格内容</li>
<li>第八个网格内容</li>
</ul>

grid-template-columns：

用于显式定义网格的列轨道（columns）。通过该属性，可以精确控制网格的列数量、宽度和排列方式。

grid-template-columns: <track-size> ... | <line-name> <track-size> ...;

.grid-container{
display:grid;/*设置grid布局*/
gap:10px 20px;/*行间距均为10 列间距为20*/

/*固定宽度列*/
grid-template-columns:100px 200px 150px; /* 三列，宽度分别为 100px、200px、150px */

/*使用 fr 单位按比例分配剩余空间*/
grid-template-columns:1fr 2fr 1fr; /* 三列，中间列宽度是两侧的两倍 */

/*混合固定和灵活宽度*/
grid-template-columns:200px 1fr 1fr; /* 第一列 200px，剩余空间由后两列平分 */

/*重复语法 repeat()*/
grid-template-columns:repeat(4,1fr); /* 四列，每列宽度相等 */
grid-template-columns:repeat(3,100px); /* 三列，每列 100px 宽 */

/*自适应列数 auto-fill/auto-fit*/
grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); /* 自动填充列，每列至少 200px，最多平均分配 */
grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); /* 类似 auto-fill，但会收缩空白列 */

/*自动宽度 auto*/
grid-template-columns:auto 1fr auto; /* 两侧列宽由内容决定，中间列填充剩余空间 */

/* 最小 / 最大宽度约束 minmax()*/
grid-template-columns:minmax(150px,300px) 1fr; /* 第一列宽度在 150px~300px 之间，第二列填充剩余空间 */


/*命名网格线*/
grid-template-columns:[col1-start] 100px [col1-end col2-start] 200px [col2-end];

/*混合多种单位*/
grid-template-columns:150px minmax(200px, 1fr) auto; /* 固定宽度 + 弹性宽度 + 内容自适应 */

}
.grid-container li{background:#ccc;}

gird-template-rows：

用于显式定义网格的列轨道（rows）。通过该属性，可以精确控制网格的行数量、高度和排列方式。

grid-template-rows: <track-size> ... | <line-name> <track-size> ...;

.grid-container{
display:grid;/*设置grid布局*/
gap:10px 20px;/*行间距均为10 列间距为20*/

/*固定高度行*/
grid-template-rows: 100px 200px; /* 两行，高度分别为 100px 和 200px */

/*比例分配行高*/
grid-template-rows: 1fr 3fr; /* 两行，第二行高度是第一行的三倍 */

/*混合固定和灵活高度*/
grid-template-rows: 80px 1fr; /* 第一行 80px，剩余空间由第二行填充 */

/*重复语法 repeat()*/
grid-template-rows: repeat(3, 100px); /* 三行，每行 100px 高 */
grid-template-rows: repeat(2, 1fr); /* 两行，高度相等 */

/*自适应行高 auto*/
grid-template-rows: auto 1fr; /* 第一行高度由内容决定，第二行填充剩余空间 */

/*最小 / 最大高度约束 minmax()*/
grid-template-rows: minmax(100px, auto); /* 行高至少 100px，最大由内容决定 */

/*自动填充行 auto-fill/auto-fit*/
grid-template-rows: repeat(auto-fill, minmax(100px, 1fr)); /* 自动创建行，每行至少 100px */

/*命名网格线*/
grid-template-rows: [header-start] 80px [header-end content-start] 1fr [content-end];

/*多行模板*/
grid-template-rows: 50px auto 50px; /* 顶部栏、内容区、底部栏的典型布局 */

/*隐式行高（配合 grid-auto-rows）当内容超出显式定义的行时，使用 grid-auto-rows 定义隐式创建的行高*/
grid-auto-rows: 120px; /* 隐式创建的行高为 120px */

}
.grid-container li{background:#ccc;}

grid-template-areas：

grid-template-areas属性用于在网格容器中定义命名的网格区域。其值是一个或多个用引号括起来的字符串，每个字符串代表网格的一行，字符串中的每个名称代表一个网格单元格。

区域名称必须是连续的矩形，不能创建非矩形区域。

使用grid-area属性将元素放置到命名区域中。

区域名称区分大小写。

配合grid-template-rows和grid-template-columns使用以定义网格尺寸。

/*简单矩形布局 创建一个3行3列的网格，header和footer横跨整个宽度，main占据中间行的前两列，sidebar占据第三列。*/
.grid-container{grid-template-areas:"header header header""main main sidebar""footer footer footer";}

/*L 形布局 . 表示空单元格，main区域从第二行延续到第三行，形成 L 形。*/
.grid-container{grid-template-areas:"header header""main sidebar""main .";}

/* 复杂不规则区域 main区域跨越两行，footer从第三行第二列开始*/
.grid-container{grid-template-areas:"header header header""main . sidebar""main footer footer";}

/*嵌套网格区域 外部网格定义整体结构，内部网格在content区域内创建子网格。*/
.grid-container{grid-template-areas:"header header""content content""footer footer";}
.content{display:grid;grid-template-areas:"main sidebar";}

/*响应式布局 在小屏幕上，所有区域垂直堆叠；在大屏幕上，变为两列布局。*/
.grid-container{grid-template-areas:"header""main""sidebar""footer";}
@media (min-width: 768px) {
  .grid-container{grid-template-areas:"header header""main sidebar""footer footer";}
}

grid-template（grid-template-columns列宽 / grid-template-rows行高 / grid-template-areas区域）：

grid-template 简写属性，用于同时定义网格的行轨道、列轨道和命名区域。

将 grid-template-rows、grid-template-columns 和 grid-template-areas 组合为一个声明。

grid-template: [row-line-name] <row-track-size> [row-line-name] / <column-track-size>; /* 行列定义 */

/* 或带命名区域的复杂语法 */

grid-template: [row-line1] "area1 area2" <row-size1> [row-line2] "area3 area4" <row-size2> / <column-size1> <column-size2>;

.grid-container{
display:grid;/*设置grid布局*/

/*grid-template-columns 定义网格的列数量和宽度 */
grid-template-columns:100px 200px 150px;  /* 三列，宽度分别为 100px、200px、150px */
grid-template-columns:1fr 2fr 1fr;        /* 三列，按 1:2:1 比例分配剩余空间 */
grid-template-columns:repeat(4, 1fr);     /* 四列，每列宽度相等 */
grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));  /* 自动填充列，每列至少 200px */
grid-template-columns:[col1-start] 100px [col1-end col2-start] 200px;  /* 命名列线 */

/*grid-template-rows 定义网格的行数量和高度 */
grid-template-rows:80px 1fr 100px;       /* 三行，中间行弹性填充 */
grid-template-rows:repeat(3, 100px);     /* 三行，每行 100px 高 */
grid-template-rows:minmax(100px, auto);  /* 行高至少 100px，最大由内容决定 */
grid-template-rows:[header-start] 80px [header-end content-start] 1fr;  /* 命名行线 */

/*grid-template-areas 通过字符串定义网格的区域布局 */
grid-template-areas:
  "header header header"   /* 第一行：header 区域跨越三列 */
  "sidebar main main"     /* 第二行：sidebar 占一列，main 占两列 */
  "footer footer footer"; /* 第三行：footer 区域跨越三列 */

/* 将项目放入命名区域
.header{grid-area:header;}
.sidebar{grid-area:sidebar;}
.main{grid-area:main;}
.footer{grid-area:footer;}
.：表示空单元格
连续相同名称：表示区域跨越多个单元格
*/

/* grid-template 同时定义 grid-template-rows、grid-template-columns 和 grid-template-areas */
/* 基本语法：[行定义] / [列定义] */
grid-template:100px 1fr / 200px 1fr;  /* 两行两列，无命名区域 */

/* 带命名区域的复杂语法 */
grid-template:
  [header-start] "header header header" 80px [header-end]
  [content-start] "sidebar main main" 1fr [content-end]
  [footer-start] "footer footer footer" 60px [footer-end]
  / 200px 1fr 1fr;  /* 列定义在最后 */

}

gap（row-gap行间距 / column-gap列间距）：

gap 属性用于设置网格行与列之间的间距，该属性是 row-gap 和 column-gap 的简写形式。

gap: <row-gap> <column-gap>; /* 分别设置行间距和列间距 */

gap: <single-value>;/* 同时设置行和列间距为相同值 */

/*可用单位px、em/rem、%、vw/vh等*/
.grid-container{
display:grid;/*设置grid布局*/
gap:10px 20px;/*行间距均为10 列间距为20*/

column-gap:20px; /* 列间距 20px */
row-gap:10px; /* 行间距 10px */
}

place-items（align-items垂直 / justify-items水平）：

place-items 是一个简写属性，用于同时设置网格项目在垂直方向和水平方向上的对齐方式。它是 align-items（垂直对齐）和 justify-items（水平对齐）的组合。

place-items: <align-items> <justify-items>; /* 第一个值为垂直对齐，第二个为水平对齐 */

place-items: <single-value>; /* 同时设置垂直和水平对齐为相同值 */

.grid-container{
display:grid;/*设置grid布局*/

/*基础对齐值*/
place-items:start;   /* 元素对齐到容器的起始位置 */
place-items:end;     /* 元素对齐到容器的结束位置 */
place-items:center;   /* 元素在容器中居中对齐 */
place-items:stretch;  /* 元素拉伸以填充容器空间（默认值） */

align-items:start;    /* 项目沿行的起始边缘对齐（顶部）*/
align-items:end;      /* 项目沿行的结束边缘对齐（底部）*/
align-items:center;   /* 项目在行中居中对齐 */
align-items:stretch;  /* 项目拉伸以填充行的高度（默认值） */

justify-items:start;    /* 项目左对齐（默认值）等同于 justify-items:left; */
justify-items:end;      /* 项目右对齐 等同于 justify-items:right;*/
justify-items:center;   /* 项目居中对齐 */
justify-items:stretch;  /* 项目拉伸以填充单元格宽度 */
justify-items:baseline;  /* 项目按文本基线对齐 */


/*安全对齐值*/
place-items:safe center;    /* 确保内容不溢出容器，必要时回退到 start */
place-items:unsafe center;  /* 强制居中，可能导致内容溢出 */

align-items:safe center; /* 居中对齐，但如果内容溢出，会自动回退到 start 以防止内容被裁剪 */
align-items:unsafe center; /* 强制居中对齐，即使内容可能溢出容器 */

justify-items:safe center;    /* 居中对齐，但防止内容溢出 */
justify-items:unsafe center;  /* 强制居中，可能导致内容溢出容器 */

/*分别设置垂直和水平对齐*/
place-items:center start;  /*align-items和justify-items综合写法 垂直居中，水平居左 */
place-items:end stretch;   /* 垂直居底，水平拉伸 */

}

place-content（justify-content水平 / align-content垂直）：

place-content 是一个简写属性，用于同时设置整个网格在容器内的垂直对齐（align-content）和水平对齐（justify-content）方式。当网格总尺寸小于容器时，该属性控制网格如何在容器中定位和分布。

place-content: <align-content> <justify-content>; /* 第一个值为垂直对齐，第二个为水平对齐 */

place-content: <single-value>;/* 同时设置垂直和水平对齐为相同值 */

.grid-container{
display:grid;/*设置grid布局*/

/*水平方向对齐*/
justify-content:start;      /* 左对齐（默认值） */
justify-content:end;        /* 右对齐 */
justify-content:center;     /* 居中对齐 */
justify-content:space-between; /* 项目间均匀分布，首尾贴边 */
justify-content:space-around;  /* 项目两侧间隔相等（首尾间距为中间的一半） */
justify-content:space-evenly;  /* 所有间隔完全相等 */
justify-content:stretch;      /* 拉伸以填充容器宽度（需显式设置列宽） */

/*垂直方向对齐*/
align-content:start;      /* 顶部对齐（默认值） */
align-content:end;        /* 底部对齐 */
align-content:center;     /* 居中对齐 */
align-content:space-between; /* 项目间均匀分布，首尾贴边 */
align-content:space-around;  /* 项目两侧间隔相等（首尾间距为中间的一半） */
align-content:space-evenly;  /* 所有间隔完全相等 */
align-content:stretch;      /* 拉伸以填充容器高度（需显式设置行高） */

/*place-content 简写属性*/
place-content:center;      /* 等价于 align-content:center; justify-content:center; */
place-content:start end;   /* 垂直顶部，水平右对齐 */
place-content:space-around stretch; /* 垂直方向间隔相等，水平方向拉伸 */

}

grid-auto-flow：

grid-auto-flow属性控制自动放置的网格项如何排列，当明确放置了部分网格项后，剩余的网格项将根据此属性的规则自动填充。

grid-auto-flow: row（column） || dense;

dense必须与 row 或 column 组合使用。不能同时指定 row 和 column。

.grid-container{
display:grid;/*设置grid布局*/

grid-auto-flow:row; /*默认值 按行优先填充，先填满当前行再开始新行，会从左到右、从上到下排列。*/
grid-auto-flow:column; /*按列优先填充，先填满当前列再开始新列，会从上到下、从左到右排列。*/
grid-auto-flow:row dense; /* 行优先 + 密集填充*/
grid-auto-flow:column dense; /* 列优先 + 密集填充 */

}

/*综合使用*/
.grid-container{
display:grid;
grid-template-columns:repeat(3, 100px); /* 定义3列 列宽100*/
grid-template-rows:repeat(2, 100px); /* 定义2行 行高100*/
grid-auto-flow:column dense; /* 列优先 + 密集填充 */
grid-auto-rows:minmax(50px, auto); /* 隐式行高自适应 */
grid-auto-columns:150px; /* 隐式列宽固定 */
}

grid-auto-rows：

用于定义隐式创建的行的大小。当网格项的位置超出显式定义的行范围时，会自动创建新的行，这些行的大小由 grid-auto-rows 控制。

grid-auto-rows: <track-size> [ <track-size> ];

<track-size> 可以是单个值，也可以是多个值（用空格分隔）。

.grid-container{
display:grid;/*设置grid布局*/

grid-auto-rows:100px; /*所有隐式行高均为100。*/
grid-auto-rows:minmax(100px, auto); /* 行高至少100，但会根据内容自动扩展。*/
grid-auto-rows:min-content; /* 行高由内容的最小可能宽度决定（如长单词不换行）。 */
grid-auto-rows:max-content; /*  行高由内容的最大可能宽度决定。*/
grid-auto-rows:fit-content(200px); /* 行高最大为200，若内容不足200则按实际内容高度显示*/
grid-auto-rows:50px 100px; /* 隐式行高交替使用50p和100（第1行50，第2行100，依此类推） */
grid-auto-rows:1fr; /* 隐式行平均分配剩余空间（需配合grid-auto-flow:column使用，否则无效）*/

}

grid-auto-columns：

用于定义隐式创建的列的大小。当网格项的位置超出显式定义的列范围时，会自动创建新的列，这些列的大小由 grid-auto-columns 控制。

grid-auto-columns: <track-size> [ <track-size> ];

<track-size> 可以是单个值，也可以是多个值（用空格分隔）。

.grid-container{
display:grid;/*设置grid布局*/

grid-auto-columns:150px; /* 所有隐式列宽均为150。*/
grid-auto-columns:minmax(100px, 300px); /* 列宽至少100，最大300，根据内容自适应。*/
grid-auto-columns:min-content; /* 列宽由内容的最小可能宽度决定。*/
grid-auto-columns:max-content; /* 列宽由内容的最大可能宽度决定。*/
grid-auto-columns:fit-content(250px); /* 列宽最大为250p，若内容不足250则按实际内容宽度显示。*/
grid-auto-columns:150px 300px; /* 隐式列宽交替使用150和300（第1列150，第2列300，以此类推）*/
grid-auto-columns:1fr; /* 隐式列平均分配剩余空间（需配合grid-auto-flow:column 使用，否则无效）。*/

}

grid：

grid是一个简写属性，用于同时设置 grid-template-rows, grid-template-columns, grid-template-areas, 以及隐式网格的 grid-auto-rows, grid-auto-columns和 grid-auto-flow。

.grid-container{
display:grid;/*设置grid布局*/

grid:none; /* 默认值 */

/* 显式网格：[行定义] / [列定义] */
grid:100px 1fr / 200px 1fr;

/* 带命名区域的显式网格 */
grid:
  "header header" 80px
  "sidebar main" 1fr
  "footer footer" 60px
  / 200px 1fr;

/* 显式 + 隐式网格：[行定义] / [列定义] [自动流] [自动行/列大小] */
grid:100px 1fr / 200px 1fr auto-flow dense 150px;

/* 同时继承行和列 */
grid:subgrid / subgrid;

/* 基于内容自动调整尺寸 */
grid:min-content max-content / auto 1fr;

/* 自动填充的网格 */
grid:auto-flow dense 100px / repeat(auto-fill, minmax(150px, 1fr));
}

grid网格子元素属性：

grid-column-start：左边框所对齐的垂直网格线。
grid-column-end：右边框所对齐的垂直网格线。
grid-column：同时定义左边框和右边框所对齐的网格线，是grid-column-start和grid-column-end的简写形式。

grid-row-start：上边框所对齐的水平网格线。
grid-row-end：下边框所对齐的水平网格线。
grid-row：同时定义上边框和下边框所对齐的网格线，是grid-row-start和grid-row-end的简写形式。

grid-area：元素位于哪个区域，区域由容器属性grid-template-areas定义。

justify-self：元素在单元格区域内的水平位置（左中右），与justify-items用法一致，但效果仅限于当前元素。
align-self：元素在单元格区域内的垂直位置（上中下），与align-items用法一致，但效果仅限于当前元素。
place-self：同时定义元素在区域内的水平和垂直位置，是align-self属性和justify-self属性的简写。

grid-column（grid-column-start起始列线 / grid-column-end结束列线）：

用于控制网格项目在列方向上的位置和跨度

grid-column同时设置 grid-column-start 和 grid-column-end，语法为 grid-column: <start> / <end>

.grid-container{
display:grid;/*设置grid布局*/
grid-template-columns:[col1-start] 100px [col1-end col2-start] 200px [col2-end];/*与命名网格线配合*/
}

.grid-container li{

grid-column-start:1;        /* 从第1条列线开始（默认值） */
grid-column-start:-1;       /* 从倒数第1条列线开始（即最后一条） */
grid-column-start:span 2;   /* 从所在位置开始，跨越2列 */
grid-column-start:col-start; /* 从命名为"col-start"的列线开始 */

grid-column-end:3;          /* 到第3条列线结束（不包含第3条） */
grid-column-end:-1;         /* 到最后一条列线结束 */
grid-column-end:span 2;     /* 从起始位置开始，跨越2列结束 */
grid-column-end:col-end;    /* 到命名为"col-end"的列线结束 */

grid-column:1 / 3;          /* 从第1条列线到第3条列线（跨越2列） */
grid-column:2 / span 3;     /* 从第2条列线开始，跨越3列 */
grid-column:1 / -1;         /* 从第1条列线到最后一条列线（跨整个网格） */
grid-column:col-start / col-end; /* 从命名列线到命名列线 */
grid-column:span 2;         /* 等价于 span 2 / span 2，跨越2列 */
grid-column:-3 / -1; /* 从倒数第3条列线到最后一条列线 */
grid-column: col1-start / col2-end; /* 跨越两列 与命名网格线配合 */
}

grid-row（grid-row-start起始行线 / grid-row-end结束行线）：

用于控制网格项目在行方向上的位置和跨度。

grid-row同时设置 grid-row-start 和 grid-row-end，语法为 grid-row: <start> / <end>

.grid-container{
display:grid;/*设置grid布局*/
grid-template-rows:[row1-start] 100px [row1-end row2-start] 200px [row2-end];/* 与命名网格线配合 */
}

.grid-container li{

grid-row-start:1;        /* 从第1条行线开始（默认值） */
grid-row-start:-1;       /* 从倒数第1条行线开始（即最后一条） */
grid-row-start:span 2;   /* 从所在位置开始，跨越2行 */
grid-row-start:row-start; /* 从命名为"row-start"的行线开始 */

grid-row-end:3;          /* 到第3条行线结束（不包含第3条） */
grid-row-end:-1;         /* 到最后一条行线结束 */
grid-row-end:span 2;     /* 从起始位置开始，跨越2行结束 */
grid-row-end:row-end;    /* 到命名为"row-end"的行线结束 */

grid-row:1 / 3;          /* 从第1条行线到第3条行线（跨越2行） */
grid-row:2 / span 3;     /* 从第2条行线开始，跨越3行 */
grid-row:1 / -1;         /* 从第1条行线到最后一条行线（跨整个网格） */
grid-row:row-start / row-end; /* 从命名行线到命名行线 */
grid-row:span 2;         /* 等价于 span 2 / span 2，跨越2行 */
grid-row:-3 / -1; /* 从倒数第3条行线到最后一条行线 */
grid-row:row1-start / row2-end; /* 跨越两行 命名网格线配合 */

}

grid-area：

作为简写属性定义项目的位置，或为项目分配命名区域。

grid-area同时设置grid-row-start, grid-column-start, grid-row-end, grid-column-end，语法为：grid-area: <row-start> / <column-start> / <row-end> / <column-end>

.grid-container{
display:grid;/*设置grid布局*/
grid-template-areas:/* 将项目放入由 grid-template-areas 定义的命名区域中 */
  "header header"
  "sidebar main"
  "footer footer";

grid-template-columns:[main-start] 1fr [sidebar-start] 200px [main-end];/*当使用命名网格线时，浏览器会自动创建区域名称*/
grid-template-rows:[header-start] 80px [content-start] 1fr [footer-start] 60px; /*当使用命名网格线时，浏览器会自动创建区域名称*/
}

.grid-container li{

grid-area:2 / 1 / 3 / 3;  /* 从第2行第1列开始，到第3行第3列结束 */
grid-area:1 / span 2 / 4 / span 3;  /* 从第1行开始跨越2行，从第1列开始跨越3列 */
grid-area:1 / 1 / -1 / -1;  /* 占据整个网格（从第1行第1列到最后一行最后一列） */

grid-area:header;  /* 将项目放入名为"header"的区域 */
grid-area:main;    /* 将项目放入名为"main"的区域 */

grid-area:content / main;  /* 自动创建的区域名为"content"和"main" */

}

place-self（justify-self水平对齐 / align-self垂直对齐） :

用于控制单个网格项目在其单元格内的对齐方式。

place-self同时设置 align-self 和 justify-self，语法为 place-self: <align-self> <justify-self>。

.grid-container{
display:grid;/*设置grid布局*/
}

.grid-container li{

justify-self:start;    /* 左对齐（默认值） */
justify-self:end;      /* 右对齐 */
justify-self:center;   /* 居中对齐 */
justify-self:stretch;  /* 拉伸以填充单元格宽度 */
justify-self:safe center;  /* 安全居中（防止内容溢出） */
justify-self:unsafe center; /* 强制居中（可能溢出） */

align-self:start;    /* 顶部对齐 */
align-self:end;      /* 底部对齐 */
align-self:center;   /* 垂直居中 */
align-self:stretch;  /* 拉伸以填充单元格高度（默认值） */
align-self:baseline; /* 与文本基线对齐 */

place-self:center;        /* 垂直和水平均居中 */
place-self:start end;     /* 垂直顶部，水平右对齐 */
place-self:stretch center; /* 垂直拉伸，水平居中 */

}