menu
Dark Mode
backgroundLayer 1
preact-material-components
Components and their props
  • 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.
Sample code
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>
    );
  }
}
Original documentation
This component encapsulates mdc-layout-grid. You can refer to its documentation here.
Demo
Grid of 12, 1 column wide items
1
1
1
1
1
1
1
1
1
1
1
1
Grid of 3, 4 column wide items
4
4
4
Grid of differently sized items
4
3
1
2
2
Grid of items with tweaks at different screen sizes
6 (8 tablet)
4 (6 tablet)
2 (4 phone)
Grid with different alignments
default
bottom
top
middle
Grid with reordered items
First cell
Second cell
Third cell
Fourth cell