menuMDUIDocs
color_lens
The new mdui 2 based on Material Design 3 and Web Components is now available. Check out the mdui 2 documentation.

Grid List

Grid lists consist of a repeated pattern of cells. They're typically used for displaying image galleries. They can be used in conjunction with the Grid System for layout.

Usage

The grid list component is implemented in pure CSS, so writing the HTML is enough for it to take effect.

Related Reading

Material Design Guidelines: Components - Grid lists

Style

Basic style

codeplay_arrow
Example
<div class="mdui-grid-tile">
  <a href="javascript:;"><img src="card.jpg"/></a>
</div>

Action bar text

codeplay_arrow
Example
<div class="mdui-grid-tile">
  <a href="javascript:;"><img src="card.jpg"/></a>
  <div class="mdui-grid-tile-actions">
    <div class="mdui-grid-tile-text">
      <div class="mdui-grid-tile-title">Halcyon Days</div>
    </div>
  </div>
</div>

Action bars can contain two lines of text.

codeplay_arrow
Example
<div class="mdui-grid-tile">
  <a href="javascript:;"><img src="card.jpg"/></a>
  <div class="mdui-grid-tile-actions">
    <div class="mdui-grid-tile-text">
      <div class="mdui-grid-tile-title">Halcyon Days</div>
      <div class="mdui-grid-tile-subtitle"><i class="mdui-icon material-icons">grid_on</i>Ellie Goulding</div>
    </div>
  </div>
</div>

Action bar button

codeplay_arrow
Example
<div class="mdui-grid-tile">
  <img src="card.jpg"/>
  <div class="mdui-grid-tile-actions">
    <div class="mdui-grid-tile-text">
      <div class="mdui-grid-tile-title">Halcyon Days</div>
      <div class="mdui-grid-tile-subtitle"><i class="mdui-icon material-icons">grid_on</i>Ellie Goulding</div>
    </div>
    <div class="mdui-grid-tile-buttons">
      <button class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">star_border</i></button>
    </div>
  </div>
</div>

Action bar style

Add the class .mdui-grid-tile-actions-top to .mdui-grid-tile-actions to position the action bar at the top of the cell.

codeplay_arrow
Example
<div class="mdui-grid-tile">
  <img src="card.jpg"/>
  <div class="mdui-grid-tile-actions mdui-grid-tile-actions-top">
    <div class="mdui-grid-tile-text">
      <div class="mdui-grid-tile-title">Halcyon Days</div>
    </div>
  </div>
</div>

Add the class .mdui-grid-tile-actions-transparent to .mdui-grid-tile-actions to give the action bar a transparent background.

codeplay_arrow
Example
<div class="mdui-grid-tile">
  <img src="card.jpg"/>
  <div class="mdui-grid-tile-actions mdui-grid-tile-actions-transparent">
    <div class="mdui-grid-tile-text">
      <div class="mdui-grid-tile-title">Halcyon Days</div>
    </div>
  </div>
</div>

Add the class .mdui-grid-tile-actions-gradient to .mdui-grid-tile-actions to give the action bar a gradient background.

codeplay_arrow
Example
<div class="mdui-grid-tile">
  <img src="card.jpg"/>
  <div class="mdui-grid-tile-actions mdui-grid-tile-actions-gradient">
    <div class="mdui-grid-tile-text">
      <div class="mdui-grid-tile-title">Halcyon Days</div>
    </div>
  </div>
</div>

Using the grid system for layout

Add the class .mdui-grid-list to .mdui-row-* of the equal columns to adjust the spacing between cells to 4px.

codeplay_arrow
Example
<div class="mdui-row-xs-3 mdui-row-sm-4 mdui-row-md-5 mdui-row-lg-6 mdui-row-xl-7 mdui-grid-list">
  <div class="mdui-col">
    <div class="mdui-grid-tile">
      <img src="card.jpg"/>
    </div>
  </div>
  <div class="mdui-col">
    <div class="mdui-grid-tile">
      <img src="card.jpg"/>
    </div>
  </div>
  <div class="mdui-col">
    <div class="mdui-grid-tile">
      <img src="card.jpg"/>
    </div>
  </div>
  <div class="mdui-col">
    <div class="mdui-grid-tile">
      <img src="card.jpg"/>
    </div>
  </div>
  <div class="mdui-col">
    <div class="mdui-grid-tile">
      <img src="card.jpg"/>
    </div>
  </div>
  <div class="mdui-col">
    <div class="mdui-grid-tile">
      <img src="card.jpg"/>
    </div>
  </div>
  <div class="mdui-col">
    <div class="mdui-grid-tile">
      <img src="card.jpg"/>
    </div>
  </div>
  <div class="mdui-col">
    <div class="mdui-grid-tile">
      <img src="card.jpg"/>
    </div>
  </div>
</div>

CSS Classes

Class NameDescription
.mdui-grid-tileDefines a tile in a grid list.
.mdui-grid-tile-actionsDefines the action bar in a tile.
.mdui-grid-tile-actions-topPositions the action bar at the top of the tile.
.mdui-grid-tile-actions-transparentGives the action bar a transparent background.
.mdui-grid-tile-actions-gradientGives the action bar a gradient background.
.mdui-grid-tile-textDefines the text in the tile action bar.
.mdui-grid-tile-titleDefines the title in the tile action bar text.
.mdui-grid-tile-subtitleDefines the subtitle in the tile action bar text.
.mdui-grid-tile-buttonsDefines the button area in the tile action bar.
.mdui-grid-listDefines the grid list. Used in conjunction with the grid layout system.
arrow_backPrevious
List Controls
arrow_forwardNext
Tabs