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%'即可