https://github.com/xremix/flexgrid
A lightweight CSS3 flex box based grid
https://github.com/xremix/flexgrid
breakpoint css3 css3-flexbox flexbox flexgrid grid grid-layout html5
Last synced: over 1 year ago
JSON representation
A lightweight CSS3 flex box based grid
- Host: GitHub
- URL: https://github.com/xremix/flexgrid
- Owner: xremix
- License: mit
- Created: 2015-12-23T10:07:03.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2017-12-11T10:30:15.000Z (over 8 years ago)
- Last Synced: 2025-01-03T16:22:40.655Z (over 1 year ago)
- Topics: breakpoint, css3, css3-flexbox, flexbox, flexgrid, grid, grid-layout, html5
- Language: HTML
- Homepage:
- Size: 5.86 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Flexgrid
A super lightweight CSS3 flex box based grid
[Demo](https://rawgit.com/xremix/Flexgrid/master/demo.html)
## Features
- CSS Only
- Super Lightweight (Only 3KB)
- Rows will size to the same height
## Browser compatiblity
All modern web browsers, IE9 and later are supported.
For more details check [Can I use.com](http://caniuse.com/#search=flex)
## Usage
#### Basic
```HTML
XS 1
XS 2
XS 3
XS 4
XS 2
```
#### Offset
```HTML
XS 1
XS 1
XS 1
```
## Documentation
### Breakpoints
Flexgrid is using the same Breakpoints as Boostrap 3
| Class | Size |
| ------------- |:-------------:|
| flex-xs- | > 768px |
| flex-sm- | < 768px |
| flex-md- | < 992px |
| flex-lg- | < 1200px |
### Offset
The offset works the same way than the grid itself `flex-xs-offset-`