https://github.com/1000ch/grd

A CSS grid framework using Flexbox. Only 321 bytes (Gzipped).
https://github.com/1000ch/grd

css flexbox grid grid-layout

Last synced: 9 days ago
JSON representation

A CSS grid framework using Flexbox. Only 321 bytes (Gzipped).

• Host: GitHub
• URL: https://github.com/1000ch/grd
• Owner: 1000ch
• License: mit
• Created: 2014-05-04T14:29:53.000Z (over 10 years ago)
• Default Branch: main
• Last Pushed: 2023-08-11T21:53:59.000Z (about 1 year ago)
• Last Synced: 2024-10-12T23:51:24.414Z (27 days ago)
• Topics: css, flexbox, grid, grid-layout
• Language: HTML
• Homepage: https://1000ch.github.io/grd/
• Size: 289 KB
• Stars: 2,208
• Watchers: 41
• Forks: 106
• Open Issues: 10
• Metadata Files:
  • Readme: readme.markdown
  • License: license

Awesome Lists containing this project

• awesome-starred - 1000ch/grd - A CSS grid framework using Flexbox. Only 321 bytes (Gzipped). (css)

README

        
# grd ![""](https://badge-size.herokuapp.com/1000ch/grd/main/grd.min.css.svg?compression=gzip)

![""](./logo.png)

A CSS grid framework using Flexbox.

- **Simple**: Provides just 2 base classes `Grid` and `Cell` and some modifiers.

- **Light-weight**: Only 321 bytes (Gzipped).

- **Flexible**: Easy to use Flexbox features.

[Flexible Box Layout Module](http://caniuse.com/#search=flex) and [`calc()` as CSS unit value](http://caniuse.com/#search=calc) used in Grd are available on modern browsers (Chrome, Firefox, Safari, Opera, Edge and IE11).

If you want to use Grd with Sass, you can choose [grd-sass](https://github.com/1000ch/grd-sass) as Sass port.

## Install

```bash

npm install grd

```

## Usage

```html



  
3of12

  
9of12



```


### `Grid` modifiers

| Vertical layout | Description |

|---|---|

| `-top` | Pull items to top |

| `-middle` |  Pull items to middle |

| `-bottom` |  Pull items to bottom |

| `-stretch` | Stretch items |

| `-baseline` |  Pull items to baseline |

| Horizontal layout | Description |

|---|---|

| `-left` | Layout items to left |

| `-center` | Layout items To center |

| `-right` | Layout items to right |

| `-between` | Add spaces between items |

| `-around` | Add spaces around items |

### `Cell` modifiers

| Cell width | Description |

|---|---|

| `-fill` | Set item width to left |

| `-1of12` | Set item width to 8.3% |

| `-2of12` | Set item width to 16.7% |

| `-3of12` | Set item width to 25% |

| `-4of12` | Set item width to 33% |

| `-5of12` | Set item width to 41.7% |

| `-6of12` | Set item width to 50% |

| `-7of12` | Set item width to 58.3% |

| `-8of12` | Set item width to 66.7% |

| `-9of12` | Set item width to 75% |

| `-10of12` | Set item width to 83.3% |

| `-11of12` | Set item width to 91.7% |

| `-12of12` | Set item width to 100% |

## License

[MIT](https://1000ch.mit-license.org) © [Shogo Sensui](https://github.com/1000ch)