Nextjs Grid

Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, JSS and Sass variables and mixins, and dozens of predefined classes, properties and components.


How it works

Material-UI’s grid system uses a series of Grid components (restyled and renamed by Creative Tim to GridContainer and GridItem for easier usage) to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.

New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.

GridContainer

It’s the same as <Grid container> component from Material-UI but with some extra styling, to make flow better with our components.

Usage

// instead of importing the container from material-ui
import Grid from 'material-ui/Grid';

// you would import our component like this
import GridContainer from "components/Grid/GridContainer.js";
// instead of using the container from material-ui
<Grid container {...props}>
  ...
</Grid container {...props}>

// you would use our component like this
<GridContainer {...props}>
  ...
</GridContainer {...props}>

Props

GridContainer.propTypes = {
  className: PropTypes.string,
  children: PropTypes.node,
};

Also, do not forget to take a look at the Grid API and Grid Examples from Material-UI.

GridItem

It’s the same as <Grid item> component from Material-UI but with some extra styling, to make flow better with our components.

Usage

// instead of importing the item from material-ui
import Grid from 'material-ui/Grid';

// you would import our component like this
import GridItem from "components/Grid/GridItem.js";
// instead of using the item from material-ui
<Grid item {...props}>
  ...
</Grid>

// you would use our component like this
<GridItem {...props}>
  ...
</GridItem>

Props

GridItem.propTypes = {
  className: PropTypes.string,
  children: PropTypes.node,
};

Also, do not forget to take a look at the Grid API and Grid Examples from Material-UI.