import React from "react";
import { Row, Col } from "@tencent/tea-component";

export default function GridResponsiveExample() {
  return (
    <Row>
      <Col xs={24} sm={12} md={8} lg={6} xl={4} xxl={2}>
        <Box>Box</Box>
      </Col>
      <Col xs={24} sm={12} md={8} lg={6} xl={4} xxl={2}>
        <Box>Box</Box>
      </Col>
      <Col xs={24} sm={12} md={8} lg={6} xl={4} xxl={2}>
        <Box>Box</Box>
      </Col>
      <Col xs={24} sm={12} md={8} lg={6} xl={4} xxl={2}>
        <Box>Box</Box>
      </Col>
      <Col xs={24} sm={12} md={8} lg={6} xl={4} xxl={2}>
        <Box>Box</Box>
      </Col>
      <Col xs={24} sm={12} md={8} lg={6} xl={4} xxl={2}>
        <Box>Box</Box>
      </Col>
      <Col xs={24} sm={12} md={8} lg={6} xl={4} xxl={2}>
        <Box>Box</Box>
      </Col>
      <Col xs={24} sm={12} md={8} lg={6} xl={4} xxl={2}>
        <Box>Box</Box>
      </Col>
      <Col xs={24} sm={12} md={8} lg={6} xl={4} xxl={2}>
        <Box>Box</Box>
      </Col>
      <Col xs={24} sm={12} md={8} lg={6} xl={4} xxl={2}>
        <Box>Box</Box>
      </Col>
      <Col xs={24} sm={12} md={8} lg={6} xl={4} xxl={2}>
        <Box>Box</Box>
      </Col>
      <Col xs={24} sm={12} md={8} lg={6} xl={4} xxl={2}>
        <Box>Box</Box>
      </Col>
    </Row>
  );
}

function Box({ children }) {
  return <div className="demo-grid-box">{children}</div>;
}