Card grid

Card grids help to layout multiple cards in rows and columns.

This basic grid system provides a fast and simple way to lay out cards. It has the following features and characteristics:

  • Available horizontal space is distributed equally between columns.
  • Supporting the layout pattern columns will wrap into multiple rows, if they have very wide content.
  • The basic wrapping also supports up to 6 columns per row with different breakpoints until stacking them in one single column on smaller screen sizes.
  • Within a row all cards will have equal height - adapting to the card with the most content.
  • Vertically the grid will simply take as much space as needed.

To see a detailed explanation of all existing classes, please refer to the usage table below.

Simple card grid

Simple card grid in App layout

Usage

ElementClassDescription
.cards .cards--simpleGrid Enables the simple grid for the contained cards. Without this modifier class, no layout at all is applied, stacking cards one above the other in a single column.
.cards__row A row contains one or more columns which are distributed equally to consume the available space. Multiple rows are stacked vertically.
.cards__col Works as a container for a single column. All such cols within a row have equal height, based on the highest card in that row.
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top