.pulseIntroductionCore valuesPrinciplesDesign tipsComponents

Col

Prop nameTypeDefaultDescription
widthunionautoOne of: array, number, string
Styled system prop names
width, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, fontSize, color, bg, fontFamily, textAlign, lineHeight, fontWeight, fontStyle, letterSpacing, display, maxWidth, minWidth, height, maxHeight, minHeight, ratio, verticalAlign, alignItems, justifyContent, flexWrap, flexDirection, flex, alignContent, justifyItems, justifySelf, alignSelf, order, flexBasis, gridGap, gridRowGap, gridColumnGap, gridColumn, gridRow, gridArea, gridAutoFlow, gridAutoRows, gridAutoColumns, gridTemplateRows, gridTemplateColumns, gridTemplateAreas, background, backgroundImage, backgroundSize, backgroundPosition, backgroundRepeat, borderRadius, borderColor, border, borderTop, borderRight, borderBottom, borderLeft, boxShadow, opacity, overflow, position, zIndex, top, right, bottom, left
auto
contains
<Container>
  <Row>
    <Col><Box bg="grayscale.400">auto</Box></Col>
    <Col width="contains"><Box bg="grayscale.400">contains</Box></Col>
  </Row>
</Container>
33.333%
33.333%
33.333%
<Container>
  <Row>
    <Col width={1 / 3}><Box bg="grayscale.400">33.333%</Box></Col>
    <Col width={1 / 3}><Box bg="grayscale.400">33.333%</Box></Col>
    <Col width={1 / 3}><Box bg="grayscale.400">33.333%</Box></Col>
  </Row>
</Container>

Responsive styles (read more...)

col
col
col
col
<Container>
  <Row>
    <Col width={[1, 1/2, 1/4]}><Box bg="grayscale.400">col</Box></Col>
    <Col width={[1, 1/2, 1/4]}><Box bg="grayscale.400">col</Box></Col>
    <Col width={[1, 1/2, 1/4]}><Box bg="grayscale.400">col</Box></Col>
    <Col width={[1, 1/2, 1/4]}><Box bg="grayscale.400">col</Box></Col>
  </Row>
</Container>