前端开发

	
	        ...
		
			
				
			

思路：

1. 利用grid的弹性盒子等比例排版

		.warpbox{
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
			grid-gap: 10px 5px;
		}

2. 给子盒子上加上定位，为了让接下来里面图片自适应，不得不做内填充 padding-top:100%~50%看需求，100%是正方形。

		.warpbox .warp-item{
			border: 1px solid #ff0000;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			padding-top: 56%;
		}

3.图片上层套一层盒子，做定位（position），防止图片尺寸不一致导致外部布局不一致（flex等被撑开）

		.warpbox .warp-item .imgbox{
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
		    display: flex; // 要里面图片居中显示加上此特性
		    justify-content: center; // 要里面图片居中显示加上此特性
		    align-items: center; // 要里面图片居中显示加上此特性
		}

4. 最后针对图片缩放，有2套方案如下

		// 方案1
		.warpbox .warp-item img {
			max-width:100%;
			max-height: 100%;
		}
		// 方案2效果一致，object-fit是针对图片拉伸的特性，scale-down表示宽高谁要用谁。
		.warpbox .warp-item img {
			width:100%;
			height: 100%;
			object-fit: scale-down;
		}

详细教程请看下面。

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