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


.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 Development License Agreement.
Back to top