display：grid 栅格布局

父元素添加

/* 父元素 */
parent-element{ 
/* grid ： 定义了一个元素作为网格容器，并使用网格线来布局其子元素。 */
/* inline-grid ： 使元素以内联块级元素的方式展示，并创建一个内联网格容器 */
/* subgrid ：用于在子网格中复用父网格的布局信息。 */
/* 注意：当元素设置了网格布局，column、float、clear、vertical-align的属性是无效的。 */
display:grid;


/* 用于定义网格布局中列的属性之一。它用于指定网格容器中的列的大小、数量和属性。 */
grid-template-columns:40px 50px auto 50px 40px;

/* 用于定义网格容器中行的属性之一。它用于指定网格中行的大小、数量和属性。   */
grid-template-rows:25% 100px auto;
}

grid-template-columns和grid-template-rows

grid 栅格布局拓展

/* repeat()接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。 */
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%);


/* repeat()重复某种模式也是可以的。 */
grid-template-columns: repeat(2, 100px 20px 80px);
/* 上述代码定义了6列，第一列和第四列的宽度为100px，第二列和第五列为20px，第三列和第六列为80px。 */


/* 有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。 */
 grid-template-columns: repeat(auto-fill, 100px);
/* 上述代码表示每列宽度100px，然后自动填充，直到容器不能放置更多的列。 */


/* 为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。 */
grid-template-columns: 1fr 1fr;
/* 上述代码表示两个相同宽度的列 */


/* 可以与绝对长度的单位结合使用 */
grid-template-columns: 150px 1fr 2fr;
/* 上述代码表示，第一列的宽度为150像素，第二列的宽度是第三列的一半。 */


/* auto关键字表示由浏览器自己决定长度。 */
grid-template-columns: 100px auto 100px;


/* minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。 */
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
/* 上面代码中，minmax(100px, 1fr)表示列宽不小于100px，不大于1fr。 */

设置行与行的间隔（行间距），设置列与列的间隔（列间距）

/*  用于指定行之间间距的属性。它用于在网格布局的行之间创建间隔。 */
row-gap: 20px; 
/*  用于指定列之间间距的属性。它用于在网格布局的列之间创建间隔。 */
column-gap: 20px;
 
/*  用于设置网格布局（Grid Layout）中行和列之间的间距。*/
gap: <row-gap> <column-gap>;
/*  如果gap省略了第二个值，浏览器认为第二个值等于第一个值。 */
gap: 20px 20px;

设置容器的子元素排列顺序

/*/默认值为 row 放置顺序是"先行后列"，即先填满第一行，再开始放入第二行 */
grid-auto-flow: row;

/* 设成column，变成"先列后行" */
grid-auto-flow: column;

/* 表示"先行后列"，并且尽可能紧密填满，尽量不出现空格。 */
grid-auto-flow: row dense;

/* 表示"先列后行"，并且尽量填满空格。 */
grid-auto-flow: column dense;

设置单元格内容的位置

/* 设置单元格内容的水平位置（左中右）stretch（默认值），占满单元格的整个宽度 */
justify-items: start | end | center | stretch;
 
/* 设置单元格内容的垂直位置（上中下） */
align-items: start | end | center | stretch;
 
/* place-items属性是align-items属性和justify-items属性的合并简写形式 */
/* 如果省略第二个值，则浏览器认为与第一个值相等。 */
place-items: <align-items> <justify-items>;