display:grid网格布局属性说明

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

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

HTML:
<ul class="ls02 f18 mt50 sysmt30">
<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：定义每一行的行高。

column-gap：定义列与列之间的列间距，原属性名为：grid-column-gap。

row-gap：定义行与行之间的行间距，原属性名为：grid-row-gap。

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

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

grid-auto-flow：定义单元格排列顺序。

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-template-areas：通过字符串语法定义网格的区域布局。

grid-template：该属性是 grid-template-columns、grid-template-rows、grid-template-areas 这三个属性的简写形式。

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：

.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：

.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;}

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

/*可用单位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水平）：

.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垂直）：

.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-columns：

/*可用单位px、em/rem、%、vw/vh等*/
.grid-container{
display:grid;/*设置grid布局*/

/*
grid-auto-columns 属性用于定义隐式创建的列轨道的尺寸。
当你放置的项目超出了显式定义的列范围时，浏览器会自动创建隐式列，
此时该属性控制这些列的宽度。*/

grid-auto-columns:150px;  /* 隐式列宽度固定为 150px */
grid-auto-columns:1fr;  /* 隐式列宽度平均分配剩余空间 */
grid-auto-columns:auto;  /* 隐式列宽度由内容决定 */
grid-auto-columns:minmax(100px, 200px);  /* 列宽至少 100px，最大 200px */
grid-auto-columns:minmax(100px, auto);   /* 列宽至少 100px，最大由内容决定 */
grid-auto-columns:100px 200px;  /* 第一个隐式列 100px，第二个 200px，循环重复 */

}

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

.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;  /* 列定义在最后 */

}

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));
}