Material UI Workshop - Grid

M
andrewgbliss
5 months ago

This article will go over the Material UI Grid component and how to use it to build layouts.

. . .

In the world of website development having a great layout is key to give your users a fast responsive application to use. Material UI has components that can help you build a great layout without knowing a lot of CSS. So let's jump into the Material UI Grid component.

For those that just want to jump into the code here is the repo:

https://github.com/EntryLevelDeveloperTraining/material-ui-workshop

Grid

The Material UI Grid component is built from the CSS Flexbox model in an easy to use component. A grid consists of two items, a grid container, and a grid item. Items are part of the grid container using a width percentage and always have fluid size when resizing. You can also set a spacing property to give each item space in between each item.

For more on CSS Flexbox please visit this link:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Grid Container

Now let's start by setting up a grid container.

import Grid from '@material-ui/core/Grid';

export default function TestingGrid() {
  return (
    <Grid container>
      You are using a grid
    </Grid>
  );
}

This is the basic setup for using a grid container. You specify the Grid component with the container property. This adds the CSS Flexbox properties onto the HTML element when it renders.

Grid Item

Now let's go over how to use grid items within a container.

import Grid from '@material-ui/core/Grid';

export default function TestingGrid() {
  return (
    <Grid container>
      <Grid item>
        Item 1
      </Grid>
      <Grid item>
        Item 2
      </Grid>
    </Grid>
  );
}

This will create a Flexbox container with two items inside using default flex box rules.

Centering Content

Centering content in HTML and CSS has been one of the hardest things to do before Flexbox. With Material UI Grid it's trivial to center things.

import Grid from '@material-ui/core/Grid';

export default function TestingGrid() {
  return (
    <Grid container justify="center" alignItems="center">
      <Grid item>
        Item 1
      </Grid>
      <Grid item>
        Item 2
      </Grid>
    </Grid>
  );
}

By adding the justify and alignItems properties you can control where the items are located. By specifying the center, Flexbox will center things up nice and neat. There are a ton of different ways to layout the grid items. Be sure to checkout all the properties of justify and alignItems.

Spacing

Now let's talk about how to add spacing to grid items. When you don't want items lined up right next to each other you can use the spacing property which accepts a number as the parameter. This will add spacing in between each element.

import Grid from '@material-ui/core/Grid';

export default function TestingGrid() {
  return (
    <Grid container justify="center" alignItems="center" spacing={2}>
      <Grid item>
        Item 1
      </Grid>
      <Grid item>
        Item 2
      </Grid>
    </Grid>
  );
}

Breakpoints

Grid items are great for setting up a layout using item sizes. You can use breakpoints to specify how wide an item is. For example:

import Grid from '@material-ui/core/Grid';

export default function TestingGrid() {
  return (
    <Grid container justify="center" alignItems="center" spacing={2}>
      <Grid item xs={12} sm={6}>
        Item 1
      </Grid>
      <Grid item xs={12} sm={6}>
        Item 2
      </Grid>
    </Grid>
  );
}

There are five grid breakpoints: xs, sm, md, lg, and xl.

In the above example the grid items will take up 12 grid widths when the screen size is xs, however when the screen is sm and above it will only take up 6.

So you can see you can make a truly responsive layout using the Grid component.

Direction

By default the layout is using a row layout, meaning items are laid out from left to right. You can also use the direction property to change it to use a column layout to lay out items from top to bottom.

import Grid from '@material-ui/core/Grid';

export default function TestingGrid() {
  return (
    <Grid container justify="center" alignItems="center" spacing={2} direction="column">
      <Grid item xs={12} sm={6}>
        Item 1
      </Grid>
      <Grid item xs={12} sm={6}>
        Item 2
      </Grid>
    </Grid>
  );
}

Creating a basic layout

Now we can start to build a basic layout that we can use to show a header with a logo and blog posts.

import Grid from '@material-ui/core/Grid';

export default function TestingGrid() {
  return (
    <Grid container direction="row" justify="center" alignItems="center" spacing={2}>
      <Grid item xs={12}>
        <Grid container justify="space-between" alignItems="center">
          <Grid item>Logo</Grid>
          <Grid item>Login</Grid>
        </Grid>
      </Grid>
      <Grid item xs={12}>
        <Grid container justify="space-between" alignItems="center">
          <Grid item xs={12} sm={8}>Blog Posts</Grid>
          <Grid item xs={12} sm={4}>Links</Grid>
        </Grid>
      </Grid>
    </Grid>
  );
}

Links

For more information on using Material UI Grid you can go checkout the docs at this link:

https://material-ui.com/components/grid/


M
andrewgbliss
5 months ago