react-styled flexboxgrid不同视口的不同配置

import { Grid, Row, Col } from 'react-styled-flexboxgrid';

const MyComponent = () => (
  <Grid>
    <Row>
      <Col xs={12} sm={6} md={4} lg={3}>
        {/* 内容 */}
      </Col>
      <Col xs={12} sm={6} md={4} lg={3}>
        {/* 内容 */}
      </Col>
      {/* 更多列 */}
    </Row>
  </Grid>
);

import styled from 'styled-components';

const Container = styled.div`
  display: flex;
  flex-wrap: wrap;
`;

const Item = styled.div`
  flex: 0 0 50%;
  /* 其他样式 */
`;

const MyComponent = () => (
  <Container>
    <Item>
      {/* 内容 */}
    </Item>
    <Item>
      {/* 内容 */}
    </Item>
    {/* 更多项 */}
  </Container>
);

import { Grid, Row, Col } from 'react-styled-flexboxgrid';

const MyComponent = () => (
  <Grid>
    <Row>
      <Col xs={12} sm={6} md={4} lg={3}>
        {/* 内容 */}
      </Col>
      <Col xs={12} sm={6} md={4} lg={3}>
        {/* 内容 */}
      </Col>
      {/* 更多列 */}
    </Row>
  </Grid>
);