import { Playground, Props } from "@slytrunk/docs";
import { View } from "../View";
import Tiles from "./Tiles";
const placeholder = {
  background: "pink",
  borderColor: "gray",
  borderWidth: 1,
  height: 32,
  width: 32,
};

# Tiles

Layout component used to create grids of components with equal spacing.

<Props of={Tiles} />

## Basic usage

<Playground>
  <Tiles columns={3} gap={8}>
    <View style={placeholder} />
    <View style={placeholder} />
    <View style={placeholder} />
    <View style={placeholder} />
    <View style={placeholder} />
  </Tiles>
</Playground>

## Flex Tiles

<Playground>
  <Tiles columns={3} gap={8}>
    <View flex style={placeholder} />
    <View flex style={placeholder} />
    <View flex style={placeholder} />
    <View flex style={placeholder} />
    <View flex style={placeholder} />
  </Tiles>
</Playground>