grid布局实现不同设备上卡片宽度数量自适应

前言

所需效果： 实现所有情况下的卡片宽度自适应，自动换行且宽度自适应，两边不出现留白现象。

遇到问题： 在电脑设置屏幕缩放125%/150%/175%或者鼠标滚轮方法缩小页面时无法保证自适应，宽度过于不确定，设置范围比较麻烦且不准确。

实现思路

实现自动换行

使用grid网格布局，设置列数为auto-fit根据宽度自适应列数。

遇到问题：设置到此时会出现因为宽度固定，导致一列放不下会换到下一行，右侧列有留白的现象。

防止列留白

防止列留白，不可以设置固定的列宽，否则无法列宽度自适应，设置minmax网格会自动填充可用空间，每列的宽度将会设置为至少260px（根据项目具体情况而定），但当有多余空间时，会按照2.6:fr的比例来分配这些额外的空间。

    display: 'grid',
    gridTemplateColumns: `repeat(auto-fit, minmax(260px, 1fr))`,
    gap:24

以上设置了网格的最小宽度为260px，同时也能够响应式地适配更多内容时的变化

示例

<div
  style={{
    display: 'grid',
    gridTemplateColumns: `repeat(auto-fit, minmax(260px, 1fr))`,
    gap:24
  }}
>
{list?.map(item=>{
  return <div>{item}</div>
})}
</div>

注意：若有分页功能，可以通过获取页面宽度计算当前页card个数，避免最后一行card数量不够导致留白。 const currentWidth = window.screen.width;

如有问题，请多多指教。