gridoCSS

simple, light and responsive Flexbox CSS Grid made with SCSS

grido TOC

• 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

grido install

~ npm install gridocss --save ~ download zip and add .min CSS to the head of your HTML page.

grido dev

npm install gulp dist to create production build gulp watch dev server Browsersync with Hot Reloading

gridoDocs

grido container

~ add .grido class to your container

<div class="grido">...</div>

grido direction

~ 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>

grido wrap

~ 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>

grido items

~ 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>

grido responsive

~ 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>

grido pads

~ add .grido--pads class to the container to have padding between your items.

<div class="grido grido--pads">...</div>

grido alignments

space-between

~ 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>

space-around

~ 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>

flex-start

~ 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>

flex-end

~ 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>

center

~ 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>

responsive alignments

~ 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>

grido vertical alignments

flex-start

~ 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>

center

~ 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>

flex-end

~ 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>

stretch

~ 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>

vertical responsive alignments

~ 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>

grido fill

~ 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>

grido autosizing

~ 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>

grido grow

~ 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>

grido order

~ 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>