for developers
Welcome
Boilerplates
Code Linting
Github Actions
Private Registry
Styled
Getting StartedGridInstallationProps tableUsageGrid.ItemModalResponsiveUtils
🔒  Local Setup
🔒  Server Setup
🔒  Code Challenge

Grid

Grid component based on the CSS Grid Layout spec.

Installation

yarn add @madebywild/styled-grid
import { Grid } from '@madebywild/styled-grid'

Props table

rows
string | number | ReactText[] | undefined
columns
string | number | ReactText[] | undefined
gap
number | [number, number] | undefined
justify
"start" | "center" | "end" | "between" | "around" | "evenly" | undefined
alignItems
"start" | "center" | "end" | "stretch" | "baseline" | undefined
areas
string[] | undefined

Rows, Columns

<Grid columns={3} /> // grid-template-columns: repeat(3, 1fr)
<Grid columns={[3, 1]} /> // grid-template-columns: repeat(3fr, 1fr)
<Grid columns={[1, 3, '10%']} /> // grid-template-columns: repeat(1fr, 3fr, '10%')

Gap

<Grid gap={3} /> // gap: 3px
<Grid gap={[3, 10]} /> // gap: 3px 10px

Alignment

<Grid alignItems={"start"} /> // align-items: flex-start
<Grid justifyContent={"end"} /> // justify-content: flex-end
<Grid justifyContent={"center"} /> // justify-content: center

Usage