Example of working with styled-css-grid library

App.js

import React, { PureComponent } from 'react';
import { Grid } from 'styled-css-grid';
import styled from 'styled-components';
import { theme } from 'utils';
import { Header, Content } from 'components';

const Container = styled.div`
  padding: ${({ padding }) => padding ? `${padding}px` : '0'} 200px;
`;

const ContentWrapper = styled.div`
  background-color: ${theme.color.lightBlack};
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
`;

export default class App extends PureComponent {
  render() {
    const { color } = theme;

    return (
      <div style={{background: 'linear-gradient(#2b5876 , #4e4376)'}}>
        <Container color={color.black}>
          <Grid columns={2} gap={0} minRowHeight={'50px'}>
            <Header />
          </Grid>
        </Container>       
        <Container color={color.black} padding={50}>
          <ContentWrapper>
            <Grid columns={3} gap="5px" minRowHeight={'200px'}>
              <Content />
            </Grid>
          </ContentWrapper>
        </Container>
      </div>
    );
  }
}

Content.js

import React, { PureComponent, Fragment } from 'react';
import { Cell } from 'styled-css-grid';
import styled from 'styled-components';

const Article = styled.div`
  background-color: ${props => props.bgColor || 'inherit'};
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
`;

export default class Content extends PureComponent {
  render() {
    return (
      <Fragment>
        <Cell width={1}>
          <Article bgColor="#ddedf5">
            123
          </Article>
        </Cell>
        <Cell width={2}>
          <Article>
            1234
          </Article>
        </Cell>
        <Cell width={2}>
          <Article bgColor="#f56058">
            12345
          </Article>
        </Cell>
        <Cell width={1}>
          <Article bgColor="#1fd5ea">
            123456
          </Article>
        </Cell>
        <Cell width={1}>
          <Article bgColor="#00212d">
            123456
          </Article>
        </Cell>
        <Cell width={1}>
          <Article bgColor="#04c89a">
            123456
          </Article>
        </Cell>
        <Cell width={1}>
          <Article bgColor="#e6416c">
            123456
          </Article>
        </Cell>
        <Cell width={1}>
          <Article bgColor="#e4f1f8">
            123456
          </Article>
        </Cell>
        <Cell width={2}>
          <Article bgColor="#f99363">
            123456
          </Article>
        </Cell>
      </Fragment>
    );
  }
}