The <Tiles> component is related to the CSS grid context. Use the <Tiles> if you want to layout some items in a responsive way.

It should be noted that <Tiles> is used for children with the same width. If you want to set different widths for the children use <Columns> instead.

It's possible to display the children elements with some spacing or set a minimum width for all items inside <Tiles>.

Import

To import the component you just have to use this code below.


import { Tiles } from '@marigold/components';

Props

Property	Type	Default	Description
`space`	`number`	`none`	Set space between items
`tilesWidth`	`string`	`250px`	Set minimum width for all items inside
`equalHeight`	`boolean`	`false`	If you set equalHeight, all items will have the size of the biggest item
`stretch`	`boolean`	`false`	Tiles will take stretch to available width and will distribute their width equally. Note that this can make them wider than the specified tiles width, but not smaller than the given "itemWidth". Basically this is full responsive mode.

Examples

Spacing Tiles

An example on how to use the space prop. The default is none. You can set it to any value.

Preview

Code

Tiles with tilesWidth

This Example shows how to use the tilesWidth property on <Tiles>.

Preview

Code

The Example shows how to use the equalHeight property, which is a boolean that can be used to size the items of the <Tiles>. You can see that all items have the size of the large Pikachu card. It is necessary if you want all items in the largest size of a child.

Preview

Code

Pikachu ist ein Pokémon mit dem Typ Elektro und existiert seit der ersten Spielgeneration. Es ist die erste Entwicklung von Pichu und kann sich selbst zu Raichu weiterentwickeln.

Tiles with and without stretch

Using the stretch property will make the tiles fully responsive. Meaning, they will distribute available width between them while not getting smaller then the given tilesWidth,

Preview

Code

Without stretch:

With stretch:

Complexe Tiles with Boxes and Stacks

A full example of a use case with <Tiles> and <Card> inside it.

Preview

Code

Glumanda

Glumanda ist ein Pokémon mit dem Typ Feuer und existiert seit der ersten Spielgeneration. Es ist neben Bisasam und Schiggy eines der Starter-Pokémon in Pokémon Rot, Blau, Feuerrot und Blattgrün.

Glutexo

Glutexo ist ein Pokémon mit dem Typ Feuer und existiert seit der ersten Spielgeneration. Als erste Weiterentwicklung von Glumanda spielt es eine wichtige Rolle als Starter-Pokémon in Pokémon Rot, Blau, Feuerrot, Blattgrün.

Glurak

Glurak ist ein Pokémon mit den Typen Feuer und Flug und existiert seit der ersten Spielgeneration. Es stellt die zweite Entwicklungsstufe von Glumanda und Glutexo dar und ist somit neben Bisaflor und Turtok eine der Endentwicklungen der Starter-Pokémon aus Kanto.