Angular Grid

Grid System

Use <mui-row> and <mui-col> elements to build a mobile-first grid that scales up to 12 columns as the viewport size increases. Currently, MUI uses the same grid system as Bootstrap so the grid elements and attributes should feel familiar.

Example: Stacked-to-horizontal

md-1 md-1 md-1 md-1 md-1 md-1 md-1 md-1 md-1 md-1 md-1 md-1 md-8 md-4 md-4 md-4 md-4 md-6 md-6 
<mui-container fluid>
  <mui-row>
    <mui-col md="1">md-1</mui-col>
    <mui-col md="1">md-1</mui-col>
    <mui-col md="1">md-1</mui-col>
    <mui-col md="1">md-1</mui-col>
    <mui-col md="1">md-1</mui-col>
    <mui-col md="1">md-1</mui-col>
    <mui-col md="1">md-1</mui-col>
    <mui-col md="1">md-1</mui-col>
    <mui-col md="1">md-1</mui-col>
    <mui-col md="1">md-1</mui-col>
    <mui-col md="1">md-1</mui-col>
    <mui-col md="1">md-1</mui-col>
  </mui-row>
  <mui-row>
    <mui-col md="8">md-8</mui-col>
    <mui-col md="4">md-4</mui-col>
  </mui-row>
  <mui-row>
    <mui-col md="4">md-4</mui-col>
    <mui-col md="4">md-4</mui-col>
    <mui-col md="4">md-4</mui-col>
  </mui-row>
  <mui-row>
    <mui-col md="6">md-6</mui-col>
    <mui-col md="6">md-6</mui-col>
  </mui-row>
</mui-container>
View in new tab »

Example: Mobile and Desktop

xs-12 md-8 xs-6 md-4 xs-6 md-4 xs-6 md-4 xs-6 md-4 xs-6 xs-6 
<mui-container fluid>
  <mui-row>
    <mui-col xs="12" md="8">xs-12 md-8</mui-col>
    <mui-col xs="6" md="4">xs-6 md-4</mui-col>
  </mui-row>
  <mui-row>
    <mui-col xs="6" md="4">xs-6 md-4</mui-col>
    <mui-col xs="6" md="4">xs-6 md-4</mui-col>
    <mui-col xs="6" md="4">xs-6 md-4</mui-col>
  </mui-row>
  <mui-row>
    <mui-col xs="6">xs-6</mui-col>
    <mui-col xs="6">xs-6</mui-col>
  </mui-row>
</mui-container>
View in new tab »

Example: Offsetting columns

md-4 md-4 md-offset-4 md-3 md-offset-3 md-3 md-offset-3 md-6 md-offset-3 
<mui-container fluid>
  <mui-row>
    <mui-col md="4">md-4</mui-col>
    <mui-col md="4" md-offset="4">md-4 md-offset-4</mui-col>
  </mui-row>
  <mui-row>
    <mui-col md="3" md-offset="3">md-3 md-offset-3</mui-col>
    <mui-col md="3" md-offset="3">md-3 md-offset-3</mui-col>
  </mui-row>
  <mui-row>
    <mui-col md="6" md-offset="3">md-6 md-offset-3</mui-col>
  </mui-row>
</mui-container>
View in new tab »
« Previous Next »