SimpleGrid

Description

A big abstraction of Grid functionality. Enable easy definition of basic grid layouts by defining either an amount of columns that items should adhere to or a minimum width that items can shrink to to rapidly build grid layouts.

Demo

import { SimpleGrid } from "@neui/layout";

Live Editor

<SimpleGrid spacing={20} columns={{ base: 1, sm: 2, md: 3 }}> <DemoBox /> <DemoBox /> <DemoBox /> <DemoBox /> </SimpleGrid>

<SimpleGrid spacing={20} columns={{ base: 1, sm: 2, md: 3 }}>
  <DemoBox />
  <DemoBox />
  <DemoBox />
  <DemoBox />
</SimpleGrid>

Result

Loading...

Props

CSS Prop	Extends	RenderAs Prop	Renders by default
	Grid		Grid

Name	CSS Rule(s)	Description
minChildWidth	undefined	Sets the minimum width children can get
columns	undefined	Sets the amount of columns the grid can grow to
spacing	gap	Sets the spacing between grid items (both x and y)
spacingX	grid-column-gap	Sets the spacing between columns
spacingY	grid-row-gap	Sets the spacing between rows