@horaciogiovine/react-tiny-grid v0.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

npm install react-tiny-grid

Usage

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.

<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.

<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.

<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:

<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