Skip to content

Tile demonstration

This page demonstrates the use of the special "Row for tiles". This row does not generate predefined columns. Instead, the elements in the row have to generate the columns. Special formatters like for the section can do this.

This allows you to generate "floating" layouts where the elements float depending on the screen size.


Lorem ipsum dolor sit amet, consetetur sadipscing elitr, at accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor.



Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim.



Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.



Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.


Tiles and "standard" elements

The elements above are in a standard container. Blow is a text-tile list. This shows that tiles and standard elements can look exactly the same if configured correctly.

What is the difference between "Tiles" and "Squares"

Tiles use display: flex - Squares use display: block.

TILES are "variable height":

  • Are part of a flex-box row
  • Height of a tile is based on the content / formatter
  • All tiles in a row will have the same height decause of flex
  • If height of tiles on a row is variable, flex will compensate for this

SQUARES require "fixed height":

  • Are not in flex-box row, use traditional box model
  • Usually do "float" left
  • Height must be set in the square itself as fixed height