simple, light and responsive Flexbox CSS Grid made with SCSS
- Install
- Development
- Grido container
- Grido direction
- Grido wrap
- Grido items
- Grido responsive
- Grido padding
- Grido alignments
- Grido vertical alignments
- Grido fill
- Grido autosizing
- Grido grow
- Grido order
~ npm install gridocss --save
~ download zip and add .min
CSS to the head of your HTML page.
npm install
gulp dist
to create production build
gulp watch
dev server Browsersync with Hot Reloading
~ add .grido
class to your container
<div class="grido">...</div>
~ add .grido--{direction}
class to manage direction
~ add .grido_{device}--{direction}
class to manage responsive direction
~ you can use --row
or --col
~ default is --row
<div class="grido grido--pads grido--col grido_sm--row">...</div>
~ add .grido--{wrap}
class to manage wrap
~ add .grido_{device}--{wrap}
class to manage responsive wrap
~ you can use --wrap
or --nowrap
~ default is --wrap
<div class="grido grido--pads grido--nowrap grido_sm--wrap">...</div>
~ add .gc_{size}
class to your items.
~ sizes: 2, 3, 4 ... up to 12
<div class="grido">
<div class="gc_8">...</div>
<div class="gc_4">...</div>
</div>
~ add .gc_{size}_{device}
class to your items.
~ devices: sm [mobile], md [tablet]
~ breakpoints: md max-width: 991px
sm max-width: 767px
<div class="grido">
<div class="gc_4 gc_9_md gc_6_sm">...</div>
<div class="gc_8 gc_3_md gc_6_sm"></div>
</div>
~ add .grido--pads
class to the container to have padding between your items.
<div class="grido grido--pads">...</div>
~ items alignment to space-between
[default alignment]
<div class="grido">
<div class="gc_2">...</div>
<div class="gc_2">...</div>
<div class="gc_2">...</div>
</div>
~ set .grido--around
class to the container for space-around
alignment
<div class="grido grido--around">
<div class="gc_2">...</div>
<div class="gc_2">...</div>
<div class="gc_2">...</div>
</div>
~ set .grido--start
class to the container for flex-start
alignment
<div class="grido grido--start">
<div class="gc_2">...</div>
<div class="gc_2">...</div>
<div class="gc_2">...</div>
</div>
~ set grido--end
class to the container for flex-end
alignment
<div class="grido grido--end">
<div class="gc_2">...</div>
<div class="gc_2">...</div>
<div class="gc_2">...</div>
</div>
~ set grido--center
class to the container for center
alignment
<div class="grido grido--center">
<div class="gc_2">...</div>
<div class="gc_2">...</div>
<div class="gc_2">...</div>
</div>
~ set .grido_{device}--{type}
to manage responsive alignments
<div class="grido grido--start grido_md--end grido_sm--between">
<div class="gc_2">...</div>
<div class="gc_2">...</div>
<div class="gc_2">...</div>
<div class="gc_2">...</div>
</div>
~ set .grido--v_start
class to the container for flex-start
vertical alignment
<div class="grido grido--v_start">
<div class="gc_2">...</div>
<div class="gc_2">...</div>
<div class="gc_2">...</div>
</div>
~ set .grido--v_center
class to the container for center
vertical alignment
<div class="grido grido--v_center">
<div class="gc_2">...</div>
<div class="gc_2">...</div>
<div class="gc_2">...</div>
</div>
~ set .grido--v_end
class to the container for flex-end
vertical alignment
<div class="grido grido--v_end">
<div class="gc_2">...</div>
<div class="gc_2">...</div>
<div class="gc_2">...</div>
</div>
~ set .grido--v_stretch
class to the container for stretch
vertical alignment
<div class="grido grido--v_stretch">
<div class="gc_2">...</div>
<div class="gc_2">...</div>
<div class="gc_2">...</div>
</div>
~ set .grido_{device}--{type}
to manage vertical responsive alignments
<div class="grido grido--v_start grido_md--v_end grido_sm--v_center">
<div class="gc_2">...</div>
<div class="gc_2">...</div>
<div class="gc_2">...</div>
<div class="gc_2">...</div>
</div>
~ set .gc_fill
class on items to fill all the available space.
~ set .gc_fill_{device}
class to manage responsive fill.
<div class="grido">
<div class="gc_fill">...</div>
<div class="gc_2 gc_fill_md">...</div>
</div>
~ set .gc_auto
class on items to set auto width.
~ set .gc_auto_{device}
class to manage responsive auto width.
<div class="grido">
<div class="gc_auto">...</div>
<div class="gc_3 gc_auto_md">...</div>
</div>
~ set .gc_grow_{number}
class to items to use a flex-grow
ratio.
~ set .gc_grow_{number}__{device}
class to manage responsive grows.
<div class="grido">
<div class="gc_grow">...</div>
<div class="gc_grow_3 gc_grow_1_md">...</div>
</div>
~ set .gc_order_{number}
class to your items to change the order
~ set .gc_order_{number}__{device}
class to manage responsive order
<div class="grido">
<div class="gc_order_2 gc_order_1_md gc_order_3_sm">...</div>
<div class="gc_order_1 gc_order_2_md gc_order_2_sm">...</div>
<div class="gc_order_3 gc_order_3_md gc_order_1_sm">...</div>
</div>