Edit

Row

A Row splits Columns into vertical oriented boxes. A Row should only contain Columns to avoid appearance issues. A Row contains one or more Columns and will break to a new line if one or more Columns exceed in size. Below you will see a code example to get an idea of how it should look like.

<Container>
  <Row>
    <Column />
  </Row>
</Container>

Properties

All properties are optional.

alignContent

Defines how the space between and around Columns inside a Row is distributed.

• Type: BreakpointValue<RowAlignContent>
• Default: undefined
• Possible Values:
  • Single Value: "center", "flex-end", "flex-start", "space-around", "space-between" or "stretch"
  • Multi Value: e.g. { md: "center", xl: "space-around" }

Single Value Example

<Container>
  <Row alignContent="flex-start">
    <Column />
  </Row>
</Container>

Multi Value Example

<Container>
  <Row alignContent={{ xs: "space-around", md: "stretch" }}>
    <Column />
  </Row>
</Container>

alignItems

Defines how the space between and around Columns inside a Row is distributed. It works like justifyContent but in the perpendicular direction.

• Type: BreakpointValue<RowAlignItems>
• Default: undefined
• Possible Values:
  • Single Value: "baseline", "center", "flex-end", "flex-start" or "stretch"
  • Multi Value: e.g. { xs: "center", md: "baseline" }

Single Value Example

<Container>
  <Row alignItems="flex-start">
    <Column />
  </Row>
</Container>

Multi Value Example

<Container>
  <Row alignItems={{ xs: "baseline", lg: "stretch" }}>
    <Column />
  </Row>
</Container>

direction

Specifies how Columns are placed in a Row.

• Type: BreakpointValue<RowDirection>
• Default: undefined
• Possible Values:
  • Single Value: "column", "column-reverse", "row" or "row-reverse"
  • Multi Value: e.g. { sm: "column", md: "row" }

Single Value Example

<Container>
  <Row direction="column-reverse">
    <Column />
  </Row>
</Container>

Multi Value Example

<Container>
  <Row direction={{ xs: "row", xl: "row-reverse" }}>
    <Column />
  </Row>
</Container>

justifyContent

Defines how the space between and around Columns inside a Row is distributed.

• Type: BreakpointValue<RowJustifyContent>
• Default: undefined
• Possible Values:
  • Single Value: "center", "flex-end", "flex-start", "space-around" or "space-between"
  • Multi Value: e.g. { sm: "center", lg: "flex-start" }

Single Value Example

<Container>
  <Row justifyContent="center">
    <Column />
  </Row>
</Container>

Multi Value Example

<Container>
  <Row justifyContent={{ sm: "flex-start", xl: "space-between" }}>
    <Column />
  </Row>
</Container>

noGutter

Determines whether the gutter is disabled.

• Type: BreakpointValue<boolean>
• Default: false
• Possible Values:
  • Single Value: false or true
  • Multi Value: e.g. { xs: true, sm: false }

Single Value Example

<Container>
  <Row noGutter="true">
    <Column />
  </Row>
</Container>

Multi Value Example

<Container>
  <Row noGutter={{ sm: true, xl: false }}>
    <Column />
  </Row>
</Container>

wrap

Specifies whether Columns are forced into a single line or can be wrapped onto multiple lines. If wrapping is allowed, this property also enables you to control the direction in which lines are stacked.

• Type: BreakpointValue<RowWrap>
• Default: wrap
• Possible Values:
  • Single Value: "nowrap", "wrap" or "wrap-reverse"
  • Multi Value: e.g. { md: "wrap", lg: "nowrap" }

Single Value Example

<Container>
  <Row wrap="wrap-reverse">
    <Column />
  </Row>
</Container>

Multi Value Example

<Container>
  <Row wrap={{ sm: "wrap", md: "nowrap" }}>
    <Column />
  </Row>
</Container>