Tiles

The <Tiles> is a layout component which is based on CSS grid system.

Usage

<Tiles> serves as a versatile container, ideal for constructing panels, cards, lists, and other content components that organize and group information. They automatically wraps children to a new line if the space given is not enough to show the <Tiles> in one row.

It's possible to display the items with some spacing through space prop or set a minimum width for all items inside <Tiles> with tilesWidth prop.

Preview

Code

Belly Laugh Ballroom

A grand ballroom where laughter echoes from every corner—guaranteed to make your belly ache from giggling.

Snicker Sanctuary

A comfortable theater where all snickers, chuckles, and guffaws are welcome. Come find your happy place.

The Jester's Junction

A vibrant community center with fun-loving vibes and plenty of laughter—where every visitor is treated like royalty!

Punning Pavilion

An open pavilion designed for wordplay wizards and pun enthusiasts—come enjoy a night of laughter that hits all the right notes.

Guffaw Gardens

A beautiful garden that blooms with laughter—ideal for large gatherings filled with smiles and fresh air.

Equal heights

If you need to have the items in the <Tiles> take the same height, you can use the equalHeight property, which is a boolean value that can be used to size the items of the <Tiles>. In this case, all items adopt the size of the largest card, making it essential when you want all items to match the largest child’s dimensions.

Stretch width

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.

Props

string;

string;

string;

string;

"off" | "polite" | "assertive";

ReactNode;

boolean;

"false"

string;

"region" | (string & {});

GapSpaceProp;

0

boolean;

"false"

string;

250px

Alternative components

• Columns: 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.

• Grid: If you need more custom controll over the layout, you should use <Grid> component instead.

Related