https://github.com/null-none/grd24

A CSS grid (responosive) framework using Flexbox (4Kb)
https://github.com/null-none/grd24

css flexbox framework grid sass

Last synced: 8 days ago
JSON representation

A CSS grid (responosive) framework using Flexbox (4Kb)

• Host: GitHub
• URL: https://github.com/null-none/grd24
• Owner: null-none
• License: mit
• Created: 2024-08-29T05:02:06.000Z (about 1 month ago)
• Default Branch: main
• Last Pushed: 2024-08-29T05:34:25.000Z (about 1 month ago)
• Last Synced: 2024-09-21T18:17:32.300Z (12 days ago)
• Topics: css, flexbox, framework, grid, sass
• Language: CSS
• Homepage:
• Size: 72.3 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# grd24

A CSS grid (responosive) framework using Flexbox.

### Install

```bash

npm install grd24

```

#### Usage

```html



  
sm-12of24

  
sm-12of24



```


### grid options

| size| value |

|---|---|

| `$sm` | 576px |

| `$md` | 768px |

| `$lg` | 992px |

| `$xl` | 1200px |

### `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 | Ddscription |

|---|---|

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

| `-reverse` | Add reverse column 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% |