Grd
A CSS grid framework using Flexbox. Only 321 bytes (Gzipped).
| Project Name | Stars | Downloads | Repos Using This | Packages Using This | Most Recent Commit | Total Releases | Latest Release | Open Issues | License | Language |
|---|---|---|---|---|---|---|---|---|---|---|
| Flexboxgrid | 9,002 |  | 1,361 | 194 | 3 years ago | 14 | August 12, 2016 | 65 | other | HTML |
| Grid based on CSS3 flexbox | ||||||||||
| Flex Layout | 5,917 |  | 5,089 | 934 | a month ago | 41 | June 30, 2022 | 50 | mit | TypeScript |
| Provides HTML UI layout for Angular applications; using Flexbox and a Responsive API | ||||||||||
| Split | 5,630 |  | 248 | 132 | 3 months ago | 43 | January 07, 2022 | 158 | mit | JavaScript |
| Unopinionated utilities for resizeable split views | ||||||||||
| Lost | 4,528 |  | 1,743 | 181 | a month ago | 48 | August 16, 2022 | 21 | mit | JavaScript |
| LostGrid is a powerful grid system built in PostCSS that works with any preprocessor and even vanilla CSS. | ||||||||||
| Awesome Css Learning | 2,923 | 9 days ago | 5 | other | ||||||
| A tiny list limited to the best CSS Learning Resources | ||||||||||
| Css Gridish | 2,212 | 4 years ago | 17 | other | CSS | |||||
| Automatically build your grid design’s CSS Grid code, CSS Flexbox fallback code, Sketch artboards, and Chrome extension. | ||||||||||
| Grd | 2,209 | | 7 | 3 | a month ago | 11 | March 16, 2018 | 9 | mit | HTML |
| A CSS grid framework using Flexbox. Only 321 bytes (Gzipped). | ||||||||||
| Grid | 2,059 |  | 134 | 72 | 4 years ago | 10 | August 06, 2019 | mit | JavaScript | |
| This package has moved and renamed | ||||||||||
| Fukol Grids | 1,453 | 6 years ago | October 25, 2016 | 7 | other | CSS | ||||
| Reflexbox | 1,363 |  | 2 | 2 | 5 years ago | 5 | July 20, 2016 | JavaScript | ||
| Moved to https://rebassjs.org | ||||||||||
Alternatives To GrdSelect To Compare
Alternative Project Comparisons
Readme
grd 
A CSS grid framework using Flexbox.
-
Simple: Provides just 2 base classes
GridandCelland some modifiers. - Light-weight: Only 321 bytes (Gzipped).
- Flexible: Easy to use Flexbox features.
Flexible Box Layout Module and calc() as CSS unit value 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 as Sass port.
Install
npm install grd
Usage
<div class="Grid">
<div class="Cell -3of12">3of12</div>
<div class="Cell -9of12">9of12</div>
</div>
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
Popular Flexbox Projects
Popular Grid Projects
Popular Web User Interface Categories
Related Searches
Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Html
Css
Sass
Layout
Grid
Flexbox
Grid Layout