Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jahfer/flexgrid
Responsive 12-column CSS grid with smart reflow
https://github.com/jahfer/flexgrid
Last synced: about 2 months ago
JSON representation
Responsive 12-column CSS grid with smart reflow
- Host: GitHub
- URL: https://github.com/jahfer/flexgrid
- Owner: jahfer
- Created: 2012-05-17T04:36:41.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2012-07-18T00:26:57.000Z (over 12 years ago)
- Last Synced: 2024-04-15T02:52:25.710Z (9 months ago)
- Language: JavaScript
- Homepage:
- Size: 289 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# FlexGrid
FlexGrid is a responsive grid that allows developers to use a 12-column grid to layout their site, while providing automatic content reflow for different browser widths. The reflow is controlled by the `.group` class, which developers can use to designate areas of related content that can be reshuffled. If grouping is not designated, the grid columns are scaled evenly by the browser width.
*Ex. Defining a 4-column row as a `.group` will split the content into two 2-column rows when viewed on a tablet.*
Typography has also been slightly optimized to make sure columns are within the optimal reading range of 50-70 characters per line.
[See the demo »](http://dev.jahfer.com/flexgrid/)
## Syntax
- The grid elements must be wrapped inside of a "container" class
- The first element in a row must contain the "first" class
```html
```