Grid

The responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.

The grid creates visual consistency between layouts while allowing flexibility across a wide variety of designs. Unifi’s responsive UI is based on a 12-column grid layout.

How it works

The grid system is implemented with the Grid component:

It uses CSS’s Flexible Box module for high flexibility.
There are two types of layout: containers and items.
Item widths are set in percentages, so they’re always fluid and sized relative to their parent element.
Items have padding to create the spacing between individual items.
There are five grid breakpoints: xs, sm, md, lg, and xl.

Spacing

The responsive grid focuses on consistent spacing widths, rather than column width. Unifi design margins and columns follow an 8dp square baseline grid. Spacing is defined as multiples of 8, with available values of 0 - 10.

class GuttersGrid extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      spacing: '2',
    };
  }

  handleChange(key, event, value) {
    this.setState({
      [key]: value,
    });
  }

  render() {
    return (
      <Grid container spacing={2}>
        <Grid item xs={12}>
          <Grid container justify="center" spacing={Number(this.state.spacing)}>
            {[0, 1, 2].map((value) => (
              <Grid key={value} item>
                <Paper style={{ height: 140, width: 100 }} />
              </Grid>
            ))}
          </Grid>
        </Grid>
        <Grid item xs={12}>
          <Paper padding={2}>
            <Grid container>
              <Grid item>
                <FormLabel>spacing</FormLabel>
                <RadioGroup
                  name="spacing"
                  aria-label="Spacing"
                  value={this.state.spacing}
                  onChange={(event, value) => this.handleChange('spacing', event, value)}
                  row
                >
                  <FormControlLabel value="0" control={<Radio />} label="0" />
                  <FormControlLabel value="1" control={<Radio />} label="1" />
                  <FormControlLabel value="2" control={<Radio />} label="2" />
                  <FormControlLabel value="4" control={<Radio />} label="4" />
                  <FormControlLabel value="6" control={<Radio />} label="6" />
                  <FormControlLabel value="8" control={<Radio />} label="8" />
                  <FormControlLabel value="10" control={<Radio />} label="10" />
                </RadioGroup>
              </Grid>
            </Grid>
          </Paper>
        </Grid>
      </Grid>
    );
  }
}

class GuttersGrid extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      spacing: '2',
    };
  }

  handleChange(key, event, value) {
    this.setState({
      [key]: value,
    });
  }

  render() {
    return (
      <Grid container spacing={2}>
        <Grid item xs={12}>
          <Grid container justify="center" spacing={Number(this.state.spacing)}>
            {[0, 1, 2].map((value) => (
              <Grid key={value} item>
                <Paper style={{ height: 140, width: 100 }} />
              </Grid>
            ))}
          </Grid>
        </Grid>
        <Grid item xs={12}>
          <Paper padding={2}>
            <Grid container>
              <Grid item>
                <FormLabel>spacing</FormLabel>
                <RadioGroup
                  name="spacing"
                  aria-label="Spacing"
                  value={this.state.spacing}
                  onChange={(event, value) => this.handleChange('spacing', event, value)}
                  row
                >
                  <FormControlLabel value="0" control={<Radio />} label="0" />
                  <FormControlLabel value="1" control={<Radio />} label="1" />
                  <FormControlLabel value="2" control={<Radio />} label="2" />
                  <FormControlLabel value="4" control={<Radio />} label="4" />
                  <FormControlLabel value="6" control={<Radio />} label="6" />
                  <FormControlLabel value="8" control={<Radio />} label="8" />
                  <FormControlLabel value="10" control={<Radio />} label="10" />
                </RadioGroup>
              </Grid>
            </Grid>
          </Paper>
        </Grid>
      </Grid>
    );
  }
}

Constrained Grid

For a layout that would benefit from a max width to prevent extending to screen edges on large displays to cap line length and content width, use the constrained prop on a <Grid container>

The default is 1200px and a string can be passed to set a custom value.

Note: Does not affect alignment. If you wish to achieve a common, centered layout, also add margin={{ x: 'auto'}} as a prop.

<>
  <Grid container constrained margin={{ bottom: 3 }}>
    <Grid item xs={12}>
      <Paper padding={2}>
        I will not extend larger than the default of <code>1200px</code>
      </Paper>
    </Grid>
  </Grid>
  <Grid container constrained="80%" margin={{ x: 'auto' }}>
    <Grid item xs={12}>
      <Paper padding={2}>
        I will not extend larger than the custom width of <code>80%</code>, and I will be centered
        in the screen or parent container.
      </Paper>
    </Grid>
  </Grid>
</>

<>
  <Grid container constrained margin={{ bottom: 3 }}>
    <Grid item xs={12}>
      <Paper padding={2}>
        I will not extend larger than the default of <code>1200px</code>
      </Paper>
    </Grid>
  </Grid>
  <Grid container constrained="80%" margin={{ x: 'auto' }}>
    <Grid item xs={12}>
      <Paper padding={2}>
        I will not extend larger than the custom width of <code>80%</code>, and I will be centered
        in the screen or parent container.
      </Paper>
    </Grid>
  </Grid>
</>

Fluid Grids

Fluid grids use columns that scale and resize content. A fluid grid’s layout can use breakpoints to determine if the layout needs to change dynamically.

Basic Grid

The column widths apply at all breakpoints (i.e. xs and up).

<Grid container spacing={3}>
  <Grid item xs={12}>
    <Paper padding={2} style={{ textAlign: 'center' }}>
      xs=12
    </Paper>
  </Grid>
  <Grid item xs={6}>
    <Paper padding={2} style={{ textAlign: 'center' }}>
      xs=6
    </Paper>
  </Grid>
  <Grid item xs={6}>
    <Paper padding={2} style={{ textAlign: 'center' }}>
      xs=6
    </Paper>
  </Grid>
  <Grid item xs={3}>
    <Paper padding={2} style={{ textAlign: 'center' }}>
      xs=3
    </Paper>
  </Grid>
  <Grid item xs={3}>
    <Paper padding={2} style={{ textAlign: 'center' }}>
      xs=3
    </Paper>
  </Grid>
  <Grid item xs={3}>
    <Paper padding={2} style={{ textAlign: 'center' }}>
      xs=3
    </Paper>
  </Grid>
  <Grid item xs={3}>
    <Paper padding={2} style={{ textAlign: 'center' }}>
      xs=3
    </Paper>
  </Grid>
</Grid>

<Grid container spacing={3}>
  <Grid item xs={12}>
    <Paper padding={2} style={{ textAlign: 'center' }}>
      xs=12
    </Paper>
  </Grid>
  <Grid item xs={6}>
    <Paper padding={2} style={{ textAlign: 'center' }}>
      xs=6
    </Paper>
  </Grid>
  <Grid item xs={6}>
    <Paper padding={2} style={{ textAlign: 'center' }}>
      xs=6
    </Paper>
  </Grid>
  <Grid item xs={3}>
    <Paper padding={2} style={{ textAlign: 'center' }}>
      xs=3
    </Paper>
  </Grid>
  <Grid item xs={3}>
    <Paper padding={2} style={{ textAlign: 'center' }}>
      xs=3
    </Paper>
  </Grid>
  <Grid item xs={3}>
    <Paper padding={2} style={{ textAlign: 'center' }}>
      xs=3
    </Paper>
  </Grid>
  <Grid item xs={3}>
    <Paper padding={2} style={{ textAlign: 'center' }}>
      xs=3
    </Paper>
  </Grid>
</Grid>

Grid with Breakpoints

Some columns have multiple widths defined, causing the layout to change at the defined breakpoint.

<Grid container spacing={3}>
  <Grid item xs={12}>
    <Paper padding={2} style={{ textAlign: 'center' }}>
      xs=12
    </Paper>
  </Grid>
  <Grid item xs={12} sm={6}>
    <Paper padding={2} style={{ textAlign: 'center' }}>
      xs=12 sm=6
    </Paper>
  </Grid>
  <Grid item xs={12} sm={6}>
    <Paper padding={2} style={{ textAlign: 'center' }}>
      xs=12 sm=6
    </Paper>
  </Grid>
  <Grid item xs={6} sm={3}>
    <Paper padding={2} style={{ textAlign: 'center' }}>
      xs=6 sm=3
    </Paper>
  </Grid>
  <Grid item xs={6} sm={3}>
    <Paper padding={2} style={{ textAlign: 'center' }}>
      xs=6 sm=3
    </Paper>
  </Grid>
  <Grid item xs={6} sm={3}>
    <Paper padding={2} style={{ textAlign: 'center' }}>
      xs=6 sm=3
    </Paper>
  </Grid>
  <Grid item xs={6} sm={3}>
    <Paper padding={2} style={{ textAlign: 'center' }}>
      xs=6 sm=3
    </Paper>
  </Grid>
</Grid>

<Grid container spacing={3}>
  <Grid item xs={12}>
    <Paper padding={2} style={{ textAlign: 'center' }}>
      xs=12
    </Paper>
  </Grid>
  <Grid item xs={12} sm={6}>
    <Paper padding={2} style={{ textAlign: 'center' }}>
      xs=12 sm=6
    </Paper>
  </Grid>
  <Grid item xs={12} sm={6}>
    <Paper padding={2} style={{ textAlign: 'center' }}>
      xs=12 sm=6
    </Paper>
  </Grid>
  <Grid item xs={6} sm={3}>
    <Paper padding={2} style={{ textAlign: 'center' }}>
      xs=6 sm=3
    </Paper>
  </Grid>
  <Grid item xs={6} sm={3}>
    <Paper padding={2} style={{ textAlign: 'center' }}>
      xs=6 sm=3
    </Paper>
  </Grid>
  <Grid item xs={6} sm={3}>
    <Paper padding={2} style={{ textAlign: 'center' }}>
      xs=6 sm=3
    </Paper>
  </Grid>
  <Grid item xs={6} sm={3}>
    <Paper padding={2} style={{ textAlign: 'center' }}>
      xs=6 sm=3
    </Paper>
  </Grid>
</Grid>

Interactive Grid Demo

Below is an interactive demo that lets you explore the visual results of the different settings:

class InteractiveGrid extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      direction: 'row',
      justify: 'center',
      alignItems: 'center',
    };
  }

  handleChange(key, event, value) {
    this.setState({
      [key]: value,
    });
  }

  render() {
    const code = `
        <Grid
        container
        direction="${this.state.direction}"
        justify="${this.state.justify}"
        alignItems="${this.state.alignItems}">
    `;

    return (
      <Grid container spacing={3}>
        <Grid item container md={6}>
          <Grid
            container
            spacing={2}
            alignItems={this.state.alignItems}
            direction={this.state.direction}
            justify={this.state.justify}
            style={{ minHeight: 240, backgroundColor: 'rgba(0,0,0,0.2)' }}
          >
            {[0, 1, 2].map((value) => (
              <Grid key={value} item>
                <Paper
                  padding={2}
                  style={{
                    paddingTop: (value + 1) * 10,
                    paddingBottom: (value + 1) * 10,
                  }}
                >
                  {`Cell ${value + 1}`}
                </Paper>
              </Grid>
            ))}
          </Grid>
        </Grid>
        <Grid item md={6}>
          <Paper padding={2} margin={{ y: 2 }} component="pre">
            {code}
          </Paper>
          <Paper padding={2}>
            <Grid container spacing={3}>
              <Grid item xs={12}>
                <FormControl component="fieldset">
                  <FormLabel>direction</FormLabel>
                  <RadioGroup
                    row
                    name="direction"
                    aria-label="Direction"
                    value={this.state.direction}
                    onChange={(event, value) => this.handleChange('direction', event, value)}
                  >
                    <FormControlLabel value="row" control={<Radio />} label="row" />
                    <FormControlLabel value="row-reverse" control={<Radio />} label="row-reverse" />
                    <FormControlLabel value="column" control={<Radio />} label="column" />
                    <FormControlLabel
                      value="column-reverse"
                      control={<Radio />}
                      label="column-reverse"
                    />
                  </RadioGroup>
                </FormControl>
              </Grid>
              <Grid item xs={12}>
                <FormControl component="fieldset">
                  <FormLabel>justify</FormLabel>
                  <RadioGroup
                    row
                    name="justify"
                    aria-label="Justify"
                    value={this.state.justify}
                    onChange={(event, value) => this.handleChange('justify', event, value)}
                  >
                    <FormControlLabel value="flex-start" control={<Radio />} label="flex-start" />
                    <FormControlLabel value="center" control={<Radio />} label="center" />
                    <FormControlLabel value="flex-end" control={<Radio />} label="flex-end" />
                    <FormControlLabel
                      value="space-between"
                      control={<Radio />}
                      label="space-between"
                    />
                    <FormControlLabel
                      value="space-around"
                      control={<Radio />}
                      label="space-around"
                    />
                    <FormControlLabel
                      value="space-evenly"
                      control={<Radio />}
                      label="space-evenly"
                    />
                  </RadioGroup>
                </FormControl>
              </Grid>
              <Grid item xs={12}>
                <FormControl component="fieldset">
                  <FormLabel>alignItems</FormLabel>
                  <RadioGroup
                    row
                    name="alignItems"
                    aria-label="Align items"
                    value={this.state.alignItems}
                    onChange={(event, value) => this.handleChange('alignItems', event, value)}
                  >
                    <FormControlLabel value="flex-start" control={<Radio />} label="flex-start" />
                    <FormControlLabel value="center" control={<Radio />} label="center" />
                    <FormControlLabel value="flex-end" control={<Radio />} label="flex-end" />
                    <FormControlLabel value="stretch" control={<Radio />} label="stretch" />
                    <FormControlLabel value="baseline" control={<Radio />} label="baseline" />
                  </RadioGroup>
                </FormControl>
              </Grid>
            </Grid>
          </Paper>
        </Grid>
      </Grid>
    );
  }
}

class InteractiveGrid extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      direction: 'row',
      justify: 'center',
      alignItems: 'center',
    };
  }

  handleChange(key, event, value) {
    this.setState({
      [key]: value,
    });
  }

  render() {
    const code = `
        <Grid
        container
        direction="${this.state.direction}"
        justify="${this.state.justify}"
        alignItems="${this.state.alignItems}">
    `;

    return (
      <Grid container spacing={3}>
        <Grid item container md={6}>
          <Grid
            container
            spacing={2}
            alignItems={this.state.alignItems}
            direction={this.state.direction}
            justify={this.state.justify}
            style={{ minHeight: 240, backgroundColor: 'rgba(0,0,0,0.2)' }}
          >
            {[0, 1, 2].map((value) => (
              <Grid key={value} item>
                <Paper
                  padding={2}
                  style={{
                    paddingTop: (value + 1) * 10,
                    paddingBottom: (value + 1) * 10,
                  }}
                >
                  {`Cell ${value + 1}`}
                </Paper>
              </Grid>
            ))}
          </Grid>
        </Grid>
        <Grid item md={6}>
          <Paper padding={2} margin={{ y: 2 }} component="pre">
            {code}
          </Paper>
          <Paper padding={2}>
            <Grid container spacing={3}>
              <Grid item xs={12}>
                <FormControl component="fieldset">
                  <FormLabel>direction</FormLabel>
                  <RadioGroup
                    row
                    name="direction"
                    aria-label="Direction"
                    value={this.state.direction}
                    onChange={(event, value) => this.handleChange('direction', event, value)}
                  >
                    <FormControlLabel value="row" control={<Radio />} label="row" />
                    <FormControlLabel value="row-reverse" control={<Radio />} label="row-reverse" />
                    <FormControlLabel value="column" control={<Radio />} label="column" />
                    <FormControlLabel
                      value="column-reverse"
                      control={<Radio />}
                      label="column-reverse"
                    />
                  </RadioGroup>
                </FormControl>
              </Grid>
              <Grid item xs={12}>
                <FormControl component="fieldset">
                  <FormLabel>justify</FormLabel>
                  <RadioGroup
                    row
                    name="justify"
                    aria-label="Justify"
                    value={this.state.justify}
                    onChange={(event, value) => this.handleChange('justify', event, value)}
                  >
                    <FormControlLabel value="flex-start" control={<Radio />} label="flex-start" />
                    <FormControlLabel value="center" control={<Radio />} label="center" />
                    <FormControlLabel value="flex-end" control={<Radio />} label="flex-end" />
                    <FormControlLabel
                      value="space-between"
                      control={<Radio />}
                      label="space-between"
                    />
                    <FormControlLabel
                      value="space-around"
                      control={<Radio />}
                      label="space-around"
                    />
                    <FormControlLabel
                      value="space-evenly"
                      control={<Radio />}
                      label="space-evenly"
                    />
                  </RadioGroup>
                </FormControl>
              </Grid>
              <Grid item xs={12}>
                <FormControl component="fieldset">
                  <FormLabel>alignItems</FormLabel>
                  <RadioGroup
                    row
                    name="alignItems"
                    aria-label="Align items"
                    value={this.state.alignItems}
                    onChange={(event, value) => this.handleChange('alignItems', event, value)}
                  >
                    <FormControlLabel value="flex-start" control={<Radio />} label="flex-start" />
                    <FormControlLabel value="center" control={<Radio />} label="center" />
                    <FormControlLabel value="flex-end" control={<Radio />} label="flex-end" />
                    <FormControlLabel value="stretch" control={<Radio />} label="stretch" />
                    <FormControlLabel value="baseline" control={<Radio />} label="baseline" />
                  </RadioGroup>
                </FormControl>
              </Grid>
            </Grid>
          </Paper>
        </Grid>
      </Grid>
    );
  }
}

Auto-Layout

The Auto-layout makes the items equitably share the available space. That also means you can set the width of one item and the others will automatically resize around it.

<>
  <Grid container spacing={3}>
    <Grid item xs>
      <Paper padding={2} style={{ textAlign: 'center' }}>
        xs
      </Paper>
    </Grid>
    <Grid item xs>
      <Paper padding={2} style={{ textAlign: 'center' }}>
        xs
      </Paper>
    </Grid>
    <Grid item xs>
      <Paper padding={2} style={{ textAlign: 'center' }}>
        xs
      </Paper>
    </Grid>
  </Grid>
  <Grid container spacing={3}>
    <Grid item xs>
      <Paper padding={2} style={{ textAlign: 'center' }}>
        xs
      </Paper>
    </Grid>
    <Grid item xs={6}>
      <Paper padding={2} style={{ textAlign: 'center' }}>
        xs=6
      </Paper>
    </Grid>
    <Grid item xs>
      <Paper padding={2} style={{ textAlign: 'center' }}>
        xs
      </Paper>
    </Grid>
  </Grid>
</>

<>
  <Grid container spacing={3}>
    <Grid item xs>
      <Paper padding={2} style={{ textAlign: 'center' }}>
        xs
      </Paper>
    </Grid>
    <Grid item xs>
      <Paper padding={2} style={{ textAlign: 'center' }}>
        xs
      </Paper>
    </Grid>
    <Grid item xs>
      <Paper padding={2} style={{ textAlign: 'center' }}>
        xs
      </Paper>
    </Grid>
  </Grid>
  <Grid container spacing={3}>
    <Grid item xs>
      <Paper padding={2} style={{ textAlign: 'center' }}>
        xs
      </Paper>
    </Grid>
    <Grid item xs={6}>
      <Paper padding={2} style={{ textAlign: 'center' }}>
        xs=6
      </Paper>
    </Grid>
    <Grid item xs>
      <Paper padding={2} style={{ textAlign: 'center' }}>
        xs
      </Paper>
    </Grid>
  </Grid>
</>

Nested Grid

The container and item properties are two independent booleans. They can be combined.

A flex container is the box generated by an element with a computed display of flex or inline-flex. In-flow children of a flex container are called flex items and are laid out using the flex layout model.

class NestedGrid extends React.Component {
  render() {
    const FormRow = () => (
      <>
        <Grid item xs={4}>
          <Paper padding={2} style={{ textAlign: 'center' }}>
            item
          </Paper>
        </Grid>
        <Grid item xs={4}>
          <Paper padding={2} style={{ textAlign: 'center' }}>
            item
          </Paper>
        </Grid>
        <Grid item xs={4}>
          <Paper padding={2} style={{ textAlign: 'center' }}>
            item
          </Paper>
        </Grid>
      </>
    );
    return (
      <Grid container spacing={8}>
        <Grid container item xs={12} spacing={3}>
          <FormRow />
        </Grid>
        <Grid container item xs={12} spacing={3}>
          <FormRow />
        </Grid>
        <Grid container item xs={12} spacing={3}>
          <FormRow />
        </Grid>
      </Grid>
    );
  }
}

class NestedGrid extends React.Component {
  render() {
    const FormRow = () => (
      <>
        <Grid item xs={4}>
          <Paper padding={2} style={{ textAlign: 'center' }}>
            item
          </Paper>
        </Grid>
        <Grid item xs={4}>
          <Paper padding={2} style={{ textAlign: 'center' }}>
            item
          </Paper>
        </Grid>
        <Grid item xs={4}>
          <Paper padding={2} style={{ textAlign: 'center' }}>
            item
          </Paper>
        </Grid>
      </>
    );
    return (
      <Grid container spacing={8}>
        <Grid container item xs={12} spacing={3}>
          <FormRow />
        </Grid>
        <Grid container item xs={12} spacing={3}>
          <FormRow />
        </Grid>
        <Grid container item xs={12} spacing={3}>
          <FormRow />
        </Grid>
      </Grid>
    );
  }
}