npm package: @horaciogiovine/react-tiny-grid
Description: A minimalist, zero-runtime-dependency grid system for React. Just a grid, nothing more - perfect for layout-only needs (~2KB gzipped).
Author: Horacio Giovine
Latest version: 0.1.0

# React Tiny Grid

A minimalist, zero-dependency grid system for React applications. Built specifically for layout-only use cases where you need a lightweight grid without the overhead of a full CSS framework.

## Why React Tiny Grid?

- 🪶 **Lightweight**: Just a grid system, nothing more. Perfect when you only need layout structure
- 📦 **Zero Dependencies**: No external CSS framework dependencies
- 🎯 **Layout Focused**: Designed for one purpose - creating responsive layouts
- 🔍 **Tiny Bundle**: Minimal impact on your application's bundle size (~2KB gzipped)
- 🛠 **TypeScript Ready**: Built with TypeScript for better development experience

## Features

- Simple 12-column grid system
- Fluid and fixed-width containers
- Basic responsive breakpoints (xs, sm, md, lg, xl, xxl)
- TypeScript support
- Minimal SCSS modules for styling
- Essential spacing controls
- Basic responsive visibility utilities

## Installation

```bash
npm install react-tiny-grid
```

## Usage

```tsx
import { Container, Row, Column } from 'react-tiny-grid';

function App() {
  return (
    <Container>
      <Row>
        <Column sizeMd={6} sizeLg={4}>
          Column 1
        </Column>
        <Column sizeMd={6} sizeLg={4}>
          Column 2
        </Column>
        <Column sizeMd={12} sizeLg={4}>
          Column 3
        </Column>
      </Row>
    </Container>
  );
}
```

## Components

### Container

The root component that provides a responsive fixed-width container or a fluid-width container.

```tsx
<Container fluid={false} noSpacing={false} classNames={['custom-class']}>
  {/* content */}
</Container>
```

Props:
- `fluid?: boolean` - Makes the container full-width
- `noSpacing?: boolean` - Removes padding from the container
- `classNames?: string[]` - Additional CSS classes
- `children: React.ReactNode` - Container content

### Row

Creates a horizontal group of columns using CSS Grid.

```tsx
<Row fluid={false} noSpacing={false} classNames={['custom-class']}>
  {/* columns */}
</Row>
```

Props:
- `fluid?: boolean` - Uses flexbox instead of grid for layout
- `noSpacing?: boolean` - Removes gutters between columns
- `classNames?: string[]` - Additional CSS classes
- `children: React.ReactNode` - Row content
- `id?: string` - Optional ID for the row element

### Column

Creates a column within a row, with support for different widths at different breakpoints.

```tsx
<Column
  size={12}
  sizeXs={12}
  sizeSm={6}
  sizeMd={4}
  sizeLg={3}
  sizeXl={3}
  sizeXxl={2}
  fluid={false}
  withVerticalGap={false}
  classNames={['custom-class']}
>
  {/* content */}
</Column>
```

Props:
- `size?: Size` - Default column width (1-12)
- `sizeXs?: Size` - Column width at xs breakpoint
- `sizeSm?: Size` - Column width at sm breakpoint
- `sizeMd?: Size` - Column width at md breakpoint
- `sizeLg?: Size` - Column width at lg breakpoint
- `sizeXl?: Size` - Column width at xl breakpoint
- `sizeXxl?: Size` - Column width at xxl breakpoint
- `fluid?: boolean` - Makes the column content fluid
- `withVerticalGap?: boolean` - Adds vertical gap between nested elements
- `classNames?: string[]` - Additional CSS classes
- `children: React.ReactNode` - Column content

## Breakpoints

The grid system uses these breakpoints for responsive design:

- `xs`: 480px
- `sm`: 576px
- `md`: 768px
- `lg`: 992px
- `xl`: 1200px
- `xxl`: 1400px

All breakpoints work as max-width media queries (except xxl which uses min-width), meaning styles apply from that breakpoint down. For example, `sizeMd={6}` will apply from 768px and below.

## Visibility Utilities

Control element visibility at different breakpoints using these utility classes:

```tsx
<div className="hide-up-to-md">
  {/* Hidden on screens smaller than md breakpoint */}
</div>

<div className="hide-from-lg">
  {/* Hidden on screens larger than or equal to lg breakpoint */}
</div>
```

Available classes:
- `hide-up-to-xs`
- `hide-up-to-sm`
- `hide-up-to-md`
- `hide-up-to-lg`
- `hide-up-to-xl`
- `hide-up-to-xxl`
- `hide-from-xs`
- `hide-from-sm`
- `hide-from-md`
- `hide-from-lg`
- `hide-from-xl`
- `hide-from-xxl`

## Spacing

The grid system uses consistent spacing variables:
- Default gutter between columns: 1.5rem
- Default vertical gap: 1rem

You can remove spacing using:
- `noSpacing` prop on Container or Row components
- `withVerticalGap` prop on Column component to add vertical spacing between nested elements

## License

MIT