menu MDUI Documentation
color_lens
near_me
Start
keyboard_arrow_down
Instalation Compatibility JavaScript tool library JavaScript global methods
layers
Style
keyboard_arrow_down
Colors and themes Font Grid layout Typography Icon Media Helper class Shadow
widgets
Component
keyboard_arrow_down
Ripple animation effect Button Floating operation button Drop-down selection Divider Expandable panel Text box Select control Slider List List control Grid list Tab Tab toolbar App bar Navigation drawer Bottom navigation bar Card Scrap of paper Tooltip Snackbar Table Dialog box Menu Progress indicator
view_carousel
JavaScript Plug-in
keyboard_arrow_down
Collapse Headroom
local_mall
Resources
keyboard_arrow_down
Material icon

Grid list

The grid list consists of a series of cells, and it is usually used to display photo albums. It can work withGrid layout system is used together for layout.

How to call

The grid list component is written in pure CSS, and only needs to write HTML code to take effect.

Related Reading

Material Design Guidelines: Components-Grid List

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
Halcyon Days
<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>

The action bar can contain two lines of text

codeplay_arrow
Example
Halcyon Days
grid_onEllie Goulding
<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
Halcyon Days
grid_onEllie Goulding
<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

in .mdui-grid-tile-actions 上添加类 .mdui-grid-tile-actions-top You can place the action bar at the top of the cell.

codeplay_arrow
Example
Halcyon Days
<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>

in .mdui-grid-tile-actions 上添加类 .mdui-grid-tile-actions-transparent You can make the operation bar have a transparent background.

codeplay_arrow
Example
Halcyon Days
<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>

in .mdui-grid-tile-actions Add class .mdui-grid-tile-actions-gradient You can make the operation bar have a gradient background.

codeplay_arrow
Example
Halcyon Days
<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>

Use grid layout system for layout

In equal parts .mdui-row-* Add class .mdui-grid-listTo 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>

List of CSS class names

Class name effect
.mdui-grid-tile Define a grid list of tiles.
.mdui-grid-tile-actions Define the action bar in the tile.
.mdui-grid-tile-actions-top Place the action bar at the top of the tile.
.mdui-grid-tile-actions-transparent Make the operation bar have a transparent background.
.mdui-grid-tile-actions-gradient Make the operation bar have a gradient background.
.mdui-grid-tile-text Define the text in the tile action bar.
.mdui-grid-tile-title Define the title in the text of the tile action bar.
.mdui-grid-tile-subtitle Define the subtitle in the text of the tile operation bar.
.mdui-grid-tile-buttons Define the button area in the tile action bar.
.mdui-grid-list Define the grid list. When used with a grid layout system.
arrow_back Previous
List control
arrow_forward Next
Tab Tab
Set document theme

Theme color

Main color

Accent color