antd_Grid栅栏的使用

1.介绍(官网)

布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理：

• 通过 row 在水平方向建立一组 column（简写 col）。

• 你的内容应当放置于 col 内，并且，只有 col 可以作为 row 的直接元素。

• 栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如，三个等宽的列可以使用 <Col span={8} /> 来创建。

• 如果一个 row 中的 col 总和超过 24，那么多余的 col 会作为一个整体另起一行排列。

2.实践

const topColResponsiveProps = {
        xs: 24,
        sm: 12,
        md: 12,
        lg: 12,
        xl: xlValue,
        style: {
            marginBottom: 24,
            paddingRight: 0,
            height: '274px',
        },
    };

设置xl值的变量：xlValue,监听浏览器的缩放，当tab页的高度变化时，可以通过setxLValue的方式改变xl的值，从而改变每一行中的栅格数；

 /* 计算容器高度 */
    const calcHeight = () => {
        const clientHeight = parseInt(
            window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
            10,
        );
        /* 期望的内容框高度 */
        const heightPx = `${clientHeight - 170}px`;

        setHeightPx(heightPx);
    };
    /** 去抖debounce */
    const resize = _.debounce(calcHeight, 200);

    useEffect(() => {
        calcHeight();
      
        window.addEventListener('resize', calcHeight);
        return () => {
            window.removeEventListener('resize', calcHeight);
        };
    }, [resize]);

    /** 监听浏览器缩放后页面高度 */
    useEffect(() => {
        if (heightPX <= '427px') {
            setXlValue(8);
        } else if (heightPX > '427px' && heightPX <= '572px') {
            setXlValue(8);
        } else if (heightPX > '572px' && heightPX <= '600px') {
            setXlValue(6);
        }
        else {
            setXlValue(5);
        }
    }, [heightPX]);

PS:当页面需要一行放置五个时，xl不能设置为小数，此时需要通过更改全局样式：

.ant-col-xl-5 {

      display: block;

      flex: 0 0 20%;

      max-width: 20%;

    }