Skip to main content

<Grid />

<Grid /> is a component based on a 12-column grid layout.

Example​

 open Ancestor

@react.component
let make = () => {
  <Grid justifyContent=[#xs(#"space-between")] spacing=[#xs(1), #md(3)]>
    <Box columns=[#xs(#12), #md(#6)]>
      <Placeholder width=[xs(100.0->#pct)]> {"6"->React.string} </Placeholder>
    </Box>
    <Box columns=[#xs(#12), #md(#6)]>
      <Placeholder width=[xs(100.0->#pct)]> {"6"->React.string} </Placeholder>
    </Box>
    <Box columns=[#xs(#12)]>
      <Placeholder width=[xs(100.0->#pct)]> {"12"->React.string} </Placeholder>
    </Box>
    <Box columns=[#xs(#12), #md(#4)]>
      <Placeholder width=[xs(100.0->#pct)]> {"xs 12 / md 4"->React.string} </Placeholder>
    </Box>
    <Box columns=[#xs(#12), #md(#4)]>
      <Placeholder width=[xs(100.0->#pct)]> {"xs 12 / md 4"->React.string} </Placeholder>
    </Box>
    <Box columns=[#xs(#12), #md(#4)]>
      <Placeholder width=[xs(100.0->#pct)]> {"xs 12 / md 4"->React.string} </Placeholder>
    </Box>
  </Grid>
}
info

Resize your browser to see the responsive styles in action.

6
6
12
xs 12 / md 4
xs 12 / md 4
xs 12 / md 4

Props​

<Grid /> accepts all props defined by the system props. Furthermore, it also accepts the following properties:

spacing​

  • Type: responsiveProp<int>

  • Optional: true

info

The responsiveProp is a customizable type defined in the Ancestor's setup. You can see the default breakpoints defined in the Ancestor's default setup or define your own breakpoints.