• LayoutGrid
  • no specific props
• LayoutGrid.Inner
  • no specific props
• LayoutGrid.Cell
  • cols [1..12]

    Column width of cell (general).
  • desktopCols [1..12]

    Column width of cell (desktop breakpoint).
  • tabletCols [1..8]

    Column width of cell (tablet breakpoint).
  • phoneCols [1..4]

    Column width of cell (phone breakpoint).
  • order [1..12]

    Allows reordering of items in grid.
  • align [top|middle|bottom]

    Vertical alignment of cell within row.

import {h, Component} from 'preact';
import LayoutGrid from 'preact-material-components/LayoutGrid';
import 'preact-material-components/LayoutGrid/style.css';

export default class LayoutGridPage extends Component {
  render(){
    return (
      <div>
        <LayoutGrid>
          <LayoutGrid.Inner>
            <LayoutGrid.Cell cols="6">First cell</LayoutGrid.Cell>
            <LayoutGrid.Cell cols="4">Second cell</LayoutGrid.Cell>
            <LayoutGrid.Cell cols="2">Third cell</LayoutGrid.Cell>
          </LayoutGrid.Inner>
        </LayoutGrid>
      </div>
    );
  }
}