grid布局实现一个响应式的照片墙样式

前言

最近开发一个照片墙模块，设计师要求如下

• 外层盒子根据视口宽度而变化
• 照片之间固定间隙，水平排列
• 图片有一个默认大小，在盒子变宽时，照片等比缩放，盒子放大到以照片默认大小可以放多一列时，图片变回默认大小，并增加多一列，具体效果如下

Grid布局实现方案

由于我用了postcss-px-to-viewport，所以px会自动转为vw，大小的PX是不会转换的

.imgs_wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(73px, 1fr));
    grid-template-rows: repeat(auto-fill, minmax(73px, 1fr));
    justify-content: start;
    grid-gap: 8PX; 
 }

重点代码解释：

1. grid-template-columns: repeat(auto-fill, minmax(73px, 1fr));：这行代码定义了网格的列布局。repeat(auto-fill, minmax(73px, 1fr)) 表示尽可能多地创建宽度至少为 73px，最大为可用空间的列。auto-fill 会自动计算可以放入多少列，而 minmax(73px, 1fr) 则定义了列的最小宽度为 73px，最大宽度为可用空间。
2. justify-content: start;：这行代码定义了网格内容在容器中的水平对齐方式。start 表示内容对齐到容器的开始位置。

Flex布局实现方案

我没选择用flex来实现是因为，最后一行靠左排列，而最后一列是没有右边距，所以用了flex-start的话，要处理剩余部分填满问题，以下是我直接用Chat-GPT生成的flex实现方式

.imgs_wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.imgs_wrapper::after {
    content: '';
    flex: auto;
}

.imgs_wrapper > div {
    flex: 1 0 73px;
}

重点代码解释：

1. .imgs_wrapper > div 选择器选中 .imgs_wrapper 的直接子元素。flex: 1 0 73px; 设置了子元素的 flex-grow 为 1，flex-shrink 为 0，flex-basis 为 73px，这意味着子元素会尽可能地占用空间，但是不会小于 73px。

2. .imgs_wrapper::after 选择器选中 .imgs_wrapper 的伪元素，content: ''; 设置了伪元素的内容为空，flex: auto; 设置了伪元素的 flex 属性为 auto，这意味着伪元素会尽可能地占用空间，使得最后一行靠左排列

END

• 文中有理解不到位的地方，欢迎各位的指导呀
• 希望这篇文章可以帮助到有需要的小伙伴们，有问题可以评论或私信我呀🤞🤞