css：卡片列表如何自适应布局

1. css媒体查询：@media + width(%)
2. flex布局
3. ant-design组件库中有个Row+Col，但是有时候需要一排放5个，此时Row+Col就不是很适用
4. 此时可以采用ant-design组件库Grid组件中useBreakpoint，搭配width(%),代码如下：

const screens = useBreakpoint();let girdWidth =Object.entries(screens).filter((screen) => !!screen[1])?.length > 0? Object.entries(screens).filter((screen) => !!screen[1])[Object.entries(screens).filter((screen) => !!screen[1]).length - 1][0]: 'lg',upLg = girdWidth == 'lg' || girdWidth == 'xl' || girdWidth == 'xxl',lowMd = girdWidth == 'xs' || girdWidth == 'sm' || girdWidth == 'md';//根据 upLg 和 lowMd设置宽度百分比

5. display:grid

父级：display: grid;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));width: 100%;overflow: hidden;gap: 18px;row-gap: 0;子级：设置width:'100%'即可