@rmwc/grid NPM

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.

rmwc

@material/layout-grid @rmwc/base @rmwc/types

@everything-registry/sub-chunk-784 ui-react-material tutorbook webiny-ui @episerver/ui-framework rmwc react-material-site @webiny/ui @zalastax/nolb-_rm

8 months ago

9 months ago

10 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

11 months ago

11 months ago

10 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago