v. 0.9.2
Simple definition: Adj. gridier, gridiest; Having or showing a desire to build flexbox grids in large or excessive amounts.
I have build Gridy out of the frustration with the bloated grid systems currently available.
Why should I be forced to use billions of nested rows and columns** just for styling relatively simple website layouts?
Why do I have to resort on crazy nth-child and clearfix, with hardcoded media queries and with arbitrary and rigidly set number of columns when building image gallery layouts?
Why do I have to use absolute positioning for centering elements in the grid and use javascript to equalize the height of the columns?
If you have experienced my problems, I feel your pain! But don't worry...you can now rely on Gridy to overcame all these issues!
Here's a list of Gridy features:
- Responsive columns, set from the parent
- Responsive columns, set from the children
- Responsive columns, set from both parent and children
- Nesting directly in the column!
- Auto width columns
- Auto height columns
- Auto clearfix!
- No more rows! No bloat!
- Gutter helpers
- Ordering and positioning helpers
- Offset helpers
You can install Gridy either by including the CSS file, or directly by adding the SASS files in your project.
Head to the Customization section to learn how to customize the grid with SASS.
Gridy is easy to use. Just add a gy="g"
data attribute to make the grid and a gy="c" data attribute to make the columns. View more details on the Gridy website
<div gy="g">
<div gy="c">...</div>
<div gy="c">...</div>
</div>
<div gy="g">
<div gy="c">...</div>
<div gy="c">...</div>
</div>
<div gy="g">
<div gy="c">...</div>
<div gy="c">...</div>
<div gy="c">...</div>
</div>
Gridy is heavily based on the work of Laurent G. author of the amazing Gridlex grid system which inspired this project.
** To be fair, before flexbox it was difficult to fix these problems