用emotion写个grid组件

1.Grid组件

import styled from '@emotion/styled/macro';

export const Grid = styled.div`
  display: flex;
  flex-wrap: wrap;
  &.align-top      { align-items: flex-start; }
  &.align-middle   { align-items: center; }
  &.align-bottom   { align-items: flex-end; }
  &.align-stretch  { align-items: stretch; }
  &.align-baseline { align-items: baseline; }
  &.justify-left     { justify-content: flex-start; }
  &.justify-center   { justify-content: center; }
  &.justify-right    { justify-content: flex-end; }
  &.justify-between  { justify-content: space-between; }
  &.justify-around   { justify-content: space-around; }

  &>div{
    margin-left: ${props => props.gutter};
    margin-right: ${props => props.gutter};
  }
`;

export const Cell = styled.div`
  box-sizing: border-box;
  flex-shrink: 0;
  &.with-fill        { width: 0; min-width: 0; flex-grow: 1; }
  &.with-1of12    { width: calc(100% * 1 / 12); }
  &.with-2of12    { width: calc(100% * 2 / 12); }
  &.with-3of12    { width: calc(100% * 3 / 12); }
  &.with-4of12    { width: calc(100% * 4 / 12); }
  &.with-5of12    { width: calc(100% * 5 / 12); }
  &.with-6of12    { width: calc(100% * 6 / 12); }
  &.with-7of12    { width: calc(100% * 7 / 12); }
  &.with-8of12    { width: calc(100% * 8 / 12); }
  &.with-9of12    { width: calc(100% * 9 / 12); }
  &.with-10of12   { width: calc(100% * 10 / 12); }
  &.with-11of12   { width: calc(100% * 11 / 12); }
  &.with-12of12   { width: 100%; }
  &.with-2of10    { width: calc(100% * 2 / 10); }

  // border: 1px solid #f00;
`;

参考 grd

2.使用

import React, { Component } from 'react';

import { Grid, Cell } from '../../src/components/Grid';

class GridDemo extends Component {
  state = {}

  render() {
    return (
      <div>
        <Grid className="justify-center align-middle" gutter=".5rem">
          <Cell className="with-3of12">
            3
            <div>div</div>
          </Cell>
          <Cell className="with-3of12">3</Cell>
          <Cell className="with-3of12">3</Cell>
        </Grid>
      </div>
    );
  }
}

export default GridDemo;

效果: