接下來我們要開始建立我們的格線系統，首先我們以 24 格為目標～

Row

import styled from 'styled-jss';
import propTypes from 'prop-types';

const StyledRow = styled('div')(({ theme, style }) => ({  
  width: '100%',
  display: 'flex',
  flexWrap: 'wrap',
  boxSizing: 'border-box',
  ...style,
}))

const Row = ({ children }) => {
return <StyledRow >{children}</StyledRow>
}

Row.propTypes = {
  children: propTypes.node,
}

Row.defaultProps = {
  children: null,
}

export default Row;

Grid

import React from 'react';
import styled from 'styled-jss';
import propTypes from 'prop-types';

// 制定分割格數
const GRID_NUMBER = 24;

// 分成不同螢幕尺寸
const mediaXS = "@media only screen and (min-width: 360px)";
const mediaSM = "@media only screen and (min-width: 480px)";
const mediaMD = "@media only screen and (min-width: 768px)";
const mediaLG = "@media only screen and (min-width: 1280px)";

const StyledGrid = styled('div')({
  flexGrow: 0,
  boxSizing: 'border-box',
  maxWidth: ({lg}) =>`${100 * lg / GRID_NUMBER}%`,
  flexBasis: ({lg}) =>`${100 * lg / GRID_NUMBER}%`,
  [mediaXS]: {
    maxWidth: ({xs}) => `${100 * xs / GRID_NUMBER}%`,
    flexBasis: ({xs}) => `${100 * xs / GRID_NUMBER}%`,
  },
  [mediaSM]: {
    maxWidth: ({sm}) =>`${100 * sm / GRID_NUMBER}%`,
    flexBasis: ({sm}) =>`${100 * sm / GRID_NUMBER}%`,
  },
  [mediaMD]: {
    maxWidth: ({md}) =>`${100 * md / GRID_NUMBER}%`,
    flexBasis: ({md}) =>`${100 * md / GRID_NUMBER}%`,
  },
  [mediaLG]: {
    maxWidth: ({lg}) =>`${100 * lg / GRID_NUMBER}%`,
    flexBasis: ({lg}) =>`${100 * lg / GRID_NUMBER}%`,
  },
  height: '100%',
})

const Gird = ({ children, ...props }) => {
return <StyledGrid {...props} >{children}</StyledGrid>
}

Gird.propTypes = {
  children: propTypes.node,
  xs: propTypes.number,
  sm: propTypes.number,
  md: propTypes.number,
  lg: propTypes.number,
}

Gird.defaultProps = {
  children: null,
  xs: GRID_NUMBER,
  sm: GRID_NUMBER,
  md: GRID_NUMBER,
  lg: GRID_NUMBER,
}

export default Gird;

只是這邊只是這邊要注意的是 styled-jss 有一個官方的 issue 還沒解，就是media query 不能使用function 的寫法：

const StyledGrid = styled('div')(({ x }) => ({
  [mediaXS]: {
    width:`${100 * xs / GRID_NUMBER}%`
  }
  ...
}))

供參：Media queries don't work when using theming function #66

Usage

import React, { Fragment } from 'react';
import { ThemeProvider, theme, } from "./lib";
import Row from './lib/Row';
import Grid from './lib/Grid';

function App() {
  return (
      <ThemeProvider theme={theme}>
        <Fragment>         
          <Row>
            <Grid md={12} lg={6} style={{ backgroundColor: '#eee', height: 50}}>1</Grid>
            <Grid  md={12} lg={6} style={{ backgroundColor: '#ddd', height: 50}}>2</Grid>
            <Grid  md={12} lg={6} style={{ backgroundColor: '#eee', height: 50}}>3</Grid>
            <Grid  md={12} lg={6} style={{ backgroundColor: '#ddd', height: 50}}>4</Grid>
          </Row>
        </Fragment>
      </ThemeProvider>
  );
}

export default App;

結果如下：

lg :

md :

sm :

簡單的格線系統大致上完成了，做法上會再研究看看怎麼處理會更好。