grid

提供されている定数・関数・型

COLUMN_UNIT

COLUMN_UNIT: 80px

GUTTER_UNIT

GUTTER_UNIT: 24px

columnSystem

カラム数(span)とcolumn size、gutter sizeを与えると必要な幅を算出します。

使い方

実装例

import { columnSystem, COLUMN_UNIT, GUTTER_UNIT } from '@charcoal-ui/foundation'
import styled from 'styled-components'

const Component = () => (
  <Row style={{ width: columnSystem(3, COLUMN_UNIT, GUTTER_UNIT) }}>
    <Col size={COLUMN_UNIT}>1</Square>
    <Col size={COLUMN_UNIT}>2</Square>
    <Col size={COLUMN_UNIT}>3</Square>
  </Row>
)

const Row = styled.div`
  display: flex;
`

const Col = styled.div<{ size: number }>`
  width: ${({ size }) => size}px;
  height: ${({ size }) => size}px;
  margin-right: 24px;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;

  &:last-child {
    margin-right: 0;
  }
`