Grid

A responsive grid component with customizable columns, gaps, and alignment.

The Grid component provides a flexible and customizable grid layout system. It supports defining the number of columns, gap spacing, and alignment properties for both items and content.

Installation

npx pixelblock-cli add Grid

This will copy the Grid.tsx file from the PixelBlock templates to your project's components/PixelBlock directory.

your-project/
├── components/
│   └── PixelBlock/
│       └── Grid.tsx
└── ...

Usage

After installing the Grid component, you can use it in your React application.

Basic Example

Here's a basic example of how to use the Grid component in a React application:

import React from "react";
import Grid from "./components/PixelBlock/Grid";

const App = () => (
  <Grid columns={3} gap={4} alignItems="center" justifyItems="center">
    <div className="bg-blue-500 text-white p-4">Item 1</div>
    <div className="bg-blue-500 text-white p-4">Item 2</div>
    <div className="bg-blue-500 text-white p-4">Item 3</div>
  </Grid>
);

export default App;

Props

Columns

Gap

Align Items

Justify Items

Conclusion

The Grid component provides an easy-to-use, flexible layout system for managing grid-based designs with full customization over columns, gaps, and alignment. Adjust the properties to fit your layout needs and create responsive designs with ease.