grid布局

Grid 布局即网格布局
display：grid 或 display：inline-grid 来创建一个网格容器

grid-template-columns 属性和 grid-template-rows 属性
grid-template-columns 属性设置列宽，grid-template-rows 属性设置行高，这两个属性在 Grid 布局中尤为重要，它们的值是有多种多样的

1、 repeat() 函数：可以简化重复的值
2、auto-fill 关键字：表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格。例如：
grid-template-columns: repeat(auto-fill, 200px);
3、fr 关键字：Grid
布局还引入了一个另外的长度单位来帮助我们创建灵活的网格轨道。fr
单位代表网格容器中可用空间的一等份。grid-template-columns: 200px 1fr 2fr 表示第一个列宽设置为
200px，后面剩余的宽度分为两部分，宽度分别为剩余宽度的 1/3 和 2/3。 例如：grid-template-columns:
200px 1fr 2fr;
4、minmax() 函数：我们有时候想给网格元素一个最小和最大的尺寸，minmax() 函数产生一个长度范围，表示长度就在这个范围之中都可以应用到网格项目中。它接受两个参数，分别为最小值和最大值。grid-template-columns: 1fr 1fr minmax(300px, 2fr) 的意思是，第三个列宽最少也是要 300px，但是最大不能大于第一第二列宽的两倍。
5、auto 关键字：由浏览器决定长度。通过 auto 关键字，我们可以轻易实现三列或者两列布局。grid-template-columns: 100px auto 100px 表示第一第三列为 100px，中间由浏览器决定长度，

grid-row-gap 属性、grid-column-gap 属性以及 grid-gap 属性
grid-row-gap 属性、grid-column-gap 属性分别设置行间距和列间距。grid-gap 属性是两者的简写形式。

grid-row-gap: 10px 表示行间距是 10px，grid-column-gap: 20px 表示列间距是 20px。grid-gap: 10px 20px 实现的效果是一样的

grid-template-areas 属性
grid-template-areas 属性用于定义区域，一个区域由一个或者多个单元格组成

一般这个属性跟网格元素的 grid-area 一起使用，我们在这里一起介绍。 grid-area 属性指定项目放在哪一个区域
grid-template-areas 属性用于定义区域，一个区域由一个或者多个单元格组成

一般这个属性跟网格元素的 grid-area 一起使用，我们在这里一起介绍。 grid-area 属性指定项目放在哪一个区域

grid-auto-flow 属性
grid-auto-flow: row dense，表示尽可能填满表格。 默认row，column

justify-items 属性、align-items 属性以及 place-items 属性
justify-items 属性设置单元格内容的水平位置（左中右），align-items 属性设置单元格的垂直位置（上中下）
.container {
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
}

justify-content 属性、align-content 属性以及 place-content 属性
.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍
space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔
space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔
stretch - 项目大小没有指定时，拉伸占据整个网格容器

grid-column-start 属性、grid-column-end 属性、grid-row-start 属性以及grid-row-end 属性
可以指定网格项目所在的四个边框，分别定位在哪根网格线，从而指定项目的位置

grid-column-start 属性：左边框所在的垂直网格线
grid-column-end 属性：右边框所在的垂直网格线
grid-row-start 属性：上边框所在的水平网格线
grid-row-end 属性：下边框所在的水平网格线

justify-self 属性、align-self 属性以及 place-self 属性
justify-self 属性设置单元格内容的水平位置（左中右），跟 justify-items 属性的用法完全一致，但只作用于单个项目

Grid 实战——实现响应式布局
fr 实现等分响应式

fr 等分单位，可以将容器的可用空间分成想要的多个等分空间。利用这个特性，我们能够轻易实现一个等分响应式。grid-template-columns: 1fr 1fr 1fr 表示容器分为三等分

repeat + auto-fit——固定列宽，改变列数量

repeat+auto-fit+minmax 去掉右侧空白
上面看到的效果中，右侧通常会留下空白，这是我们不希望看到的。如果列的宽度也能在某个范围内自适应就好了。minmax() 函数就帮助我们做到了这点。将 grid-template-columns: repeat(auto-fit, 200px) 改成 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) 表示列宽至少 200px，如果还有空余则一起等分

repeat+auto-fit+minmax-span-dense 解决空缺问题

repeat+auto-fit+minmax-span-dense 解决空缺问题

.wrapper, .wrapper-1 {
margin: 50px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px 20px;
grid-auto-rows: 50px;
}

.wrapper-1 {
grid-auto-flow: row dense;
}
————————————————
版权声明：本文为CSDN博主「赵非文」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_50959040/article/details/123637996