昨天产品提了一个迭代的pc端需求，本来一共四个的循环卡片写死的布局，减去边距，一个卡片宽度是百分之48，两行一行两个，超过父容器显示滚动条， 现在要在加一个卡片，还是两行布局，期望的效果是，第一行三个，第二行两个，卡片的大小肯定不能变，卡片的min-width：625px，超过的宽度横向滚动。 当时提需求时正好组长在旁边，负责我们的代码review，我第一反应在写死嘛，写死？怎么写死？五个卡片每个大小内容都一样循环出来的
整理了一下我跟组长的思路：
我说：我给数组末尾push一条数据，然后隐藏最后一个卡片，还跟之前的布局一样强制两行。
组长：那以后要有6个，7个，8个，9个呢，能不能把他写成自适应呢？
组长：可能这样的布局只能使用js去计算了，去计算他的父容器，主要还有滚动呢
我：使用珊格布局能不能实现呢，我写了一个dome试一下
当时觉得这种方法可以，但是要自适应呢，改变容器的宽度，那些块会往下，变成三行，四行等等他不会超过父容器宽度设置overflow: auto;是没有用的，还是会换行。珊格布局详细介绍 那没有办法了吗，可能还真没有别的办法了，只能使用js去算，那怎么算才能更简单呢？ 还有一种办法是拆成两个div，处理一下数据，那样有点蠢。
直接上代码
.card-container {
display: grid;
grid-auto-rows: auto; /* 自动设置行高 */
gap: 10px; /* 卡片之间的间距 */
width: 1000px; /* 容器宽度 */
margin: 0 auto;
overflow-x: auto;
.card {
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 4px;
padding: 20px;
box-sizing: border-box;
min-width: 625px;
}
const cardDom = document.getElementsByClassName('card-container');
const firstRowCount = Math.round(this.state.cardList.length / 2) //拿到数组的长度四舍五入
cardItem.style.gridTemplateColumns = `repeat(${firstRowCount}, 58%)`;
写dom时发现可以通过改变grid-template-columns的属性能够变成自适应。卡片有3个的时候，firstRowCount是2，第一行有两个第二行有三个，卡片有8个的时候firstRowCount是4，一行4个，两行， 这样只需要写三行js代码就解决了
还有什么别的好方法吗？ 评论区可以讨论一下
