@rmwc/grid

Layout Grid

Material design’s responsive UI is based on a column-variate grid layout. It has 12 columns on desktop, 8 columns on tablet and 4 columns on phone.

• Module @rmwc/grid
• Import styles:
  • Using CSS Loader
    • import '@rmwc/grid/styles';
  • Or include stylesheets
    • '@material/layout-grid/dist/mdc.layout-grid.css'
• MDC Docs: https://material.io/develop/web/components/layout-grid/

<Grid>
  <GridCell span={4}>1</GridCell>
  <GridCell span={4}>2</GridCell>
  <GridCell span={4}>3</GridCell>
</Grid>

<Grid>
  {/* If you need additional control over height of your grid, or need to add SubGrids, you can add your own GridRow components. */}
  <GridRow>
    <GridCell span={6}>1</GridCell>
    <GridCell span={6}>
      <GridRow>
        <GridCell span={6}>a</GridCell>
        <GridCell span={6}>b</GridCell>
      </GridRow>
    </GridCell>
  </GridRow>
</Grid>

Grid

A Grid component

Props

Name	Type	Description
align	"left" | "right"	Specifies the alignment of the whole grid.
children	ReactNode	Children for the Grid
fixedColumnWidth	boolean	Specifies the grid should have fixed column width.

GridCell

A Grid cell

Props

Name	Type	Description
align	"middle" | "top" | "bottom"	Specifies the alignment of cell
desktop	number	Number of columns to span on a desktop.
order	number	Specifies the order of the cell.
phone	number	Number of columns to span on a phone.
span	number	Default number of columns to span.
tablet	number	Number of columns to span on a tablet.

GridRow

By default, an inner grid component is included inside of . Use GridRow when doing nested Grids.

Changelog

14.3.5 (2024-10-24)

🩹 Fixes

• List: improve documentation's rendering of prop table (df0d6fcb)
• select: get display value (33a9d667)

❤️ Thank You

• Emilie
• Matt @mgr34