https://github.com/solarliner/preact-grid-utils
Variable-width grid system for Preact. 300b by itself, 600b counting preact-dandy.
https://github.com/solarliner/preact-grid-utils
Last synced: about 1 year ago
JSON representation
Variable-width grid system for Preact. 300b by itself, 600b counting preact-dandy.
- Host: GitHub
- URL: https://github.com/solarliner/preact-grid-utils
- Owner: SolarLiner
- License: mit
- Created: 2019-04-17T22:37:00.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-04-18T16:38:15.000Z (about 7 years ago)
- Last Synced: 2025-02-12T13:54:08.433Z (over 1 year ago)
- Language: TypeScript
- Size: 137 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# preact-grid-utils
Variable-width grid system for Preact. 300b by itself, 600b counting preact-dandy.
## Installation
```bash
npm i preact-grid-utils
```
## Usage
The Grid utils define two components, **Grid** and **Item**.
### Grid
```tsx
{...}
```
The Grid component is a simple wrapper over CSS Grid, with a variable-width grid. It has two optional props, which controls gap and auto-flow. Their default values are shown above.
The **variable-width** grid is similar to [Material Design Component's Layout Grid](https://www.material.io/develop/web/components/layout-grid/), it changes its number of columns depending on the width of the client device. This makes it easier to work with the grid in JSX.
The grid is configured by default with the widths as **upper limits**:
- **6 columns** until **480px**
- **8 columns** until **880px**
- **12 columns** above.
This means for layout purposes that items of width **1,2,4,6,12** will be best and most stable. You can change number of columns at each breakpoint with the **small**, **medium**, and **large** props.
### Item
```tsx
{...}
```
The Item component wraps a single item in the grid. You can optionally pass a size (the _level_ prop) and an offset (the _offset_ property), but if you don't, their default values are shown above.