Root

Root is used to limit the width of the page content and keep it centered within the page.

Although all props passed to <Root /> will be passed down to the underlying <Grid />, keep in mind that customizing size, margins and/or paddings may impact the resulting layout.

In order to modify the page margins you should use ConfigProvider's pageMargin parameter instead. This will allow you to reliably define margins for all responsive layouts as determined by displayAliases.

Usage

A <Root/> component should only be used as a direct child of a <Layout /> component:

import { Root, Layout } from 'reflex'

<Layout>
  <Root>
   <!-- Page Content -->
  </Root>
</Layout>

The page structure with <Root /> would look like:

One or more nested <Layout /> component
- One <Root/>
  - One or more nested <Grid />s

You can have more than one top level <Layout /> component per page (e.g. One per header / content / footer). For instance, the following is a fragment of the Holy Grail layout example that illustrates this case:

<Layout height="parent" className={styles.page}>

  { /* HEADER */ }
  <Layout dev={1} fixed="top">
    <Root>
     <Grid padding="L/2">
        <h1>Header</h1>
     </Grid>
    </Root>
  </Layout>

  { /* CONTENT */ }
  <Layout height="auto" className={styles.main}>
    <Root>
      <Grid margin="0 L/2">
        { /* ... */ }
      </Grid>
    </Root>
  </Layout>

  { /* FOOTER */ }
  { /* ... */ }

</Layout>