include-media-grid

An include-media plugin for generating grid classes based on the flex display property

Introduction

This plugin generates classes for a grid system based on a number of subdivisions specified by the user, and taking into account all the breakpoints defined by include-media.

@import'include-media';
@import'include-media-grid';
$breakpoints: (phone: 480px, tablet: 768px, desktop: 1024px);
// Grid class name$im-grid-class: 'grid';
// Cell class name$im-grid-cell-class: 'grid-cell';
// Setting gutters$im-grid-gutter-size: 20px;
// Optionally include max-width to fix IE issues$im-grid-include-max-width: false !default;
// Generating grid classes for 1, 2 and 4 column layouts@includeim-grid-columns(1, 2, 4);

Basic Grids:

The grid cells below do not specify any widths, they just naturally space themselves equally and expand to fit the entire row. They’re also equal height by default.

<divclass="grid"><divclass="grid-cell">1/2</div><divclass="grid-cell">1/2</div></div><divclass="grid"><divclass="grid-cell">1/3</div><divclass="grid-cell">1/3</div><divclass="grid-cell">1/3</div></div><divclass="grid grid--flex-cells"><divclass="grid-cell">Full-height, even when my content doesn't fill the space.</div><divclass="grid-cell">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu. Maecenas sagittis ante ut turpis varius interdum. Quisque tellus ipsum, eleifend non ipsum id, suscipit ultricies neque.</div></div>

Gutters

<!-- With gutters --><divclass="grid grid--gutters"><divclass="grid-cell"></div><divclass="grid-cell"></div><divclass="grid-cell"></div><divclass="grid-cell"></div></div>

Individual Sizing

When equal widths aren’t what you want, you can add sizing classes to individual cells. Cells without sizing classes simply divide up the remaining space as normal.

<!-- Force cell to be always a full width single column --><divclass="grid" ><divclass="grid-cell">auto - 1/2</div><divclass="grid-cell">auto - 1/2.</div><divclass="grid-cell grid-cell--1-1">Always single column!!!</div></div>

Weight

You can change the way the cells size themselves, by modifying flex-grow property.

<!-- With gutters --><divclass="grid grid--gutters"><divclass="grid-cell grid-cell--light">Half the weight of default column.</div><divclass="grid-cell"></div></div>

<!-- With gutters --><divclass="grid grid--gutters"><divclass="grid-cell grid-cell--heavy">Twice the weight of default column.</div><divclass="grid-cell"></div></div>

Responsive

Responsive Grids work by adding media classes to the Grid cells or containers. When those media values are met, the grids automatically adjust accordingly.

<!-- 1 column on mobile phones. 2 columns on tablets. 4 on desktop devices --><divclass="grid grid--1-1@phone grid--1-2@tablet grid--1-4@desktop"><divclass="grid-cell"></div><divclass="grid-cell"></div><divclass="grid-cell"></div><divclass="grid-cell"></div></div><!-- Full-width up to desktop breakpoint --><divclass="grid grid--full grid--1-4@desktop"><divclass="grid-cell"></div><divclass="grid-cell"></div><divclass="grid-cell grid-cell--1-1@dekstop"></div><divclass="grid-cell grid-cell--1-1">Always single column!!!</div></div><!-- Individual sizing --><divclass="grid grid--1-1@phone grid--1-2@tablet grid--1-4@desktop"><divclass="grid-cell"></div><divclass="grid-cell"></div><divclass="grid-cell grid-cell--1-1">Always single column!!!</div></div>

Auto grids

You can avoid adding grid-cell to children of the grid by using the grid--auto class. All children elements will be treated as a grid-cell.

<!-- No need for grid-cell --><divclass="grid grid--auto"><div>same row</div><div>same row</div><div>same row</div><div>same row</div></div>

If you need your grid items to fit a specific number of columns, you can use grid--auto-{columnNumber}. Any column set generated with im-grid-columns is usable. Responsive grids are also usable.

<!-- No need for grid-cell, two columns per row --><divclass="grid grid--gutters grid--auto grid--auto-2@tablet grid--auto-4@desktop"><div>first row on desktop, first row on tablet</div><div>first row on desktop, first row on tablet</div><div>first row on desktop, second row on tablet</div><div>first row on desktop, second row on tablet</div></div>

Alignment Features

<!-- Top-aligned Grid Cells --><divclass="grid grid--top"><divclass="grid-cell"></div><divclass="grid-cell"></div><divclass="grid-cell"></div></div><!-- Bottom-aligned Grid Cells --><divclass="grid grid--top"><divclass="grid-cell"></div><divclass="grid-cell"></div><divclass="grid-cell"></div></div><!-- Vertically Centered Grid Cells --><divclass="grid grid--center"><divclass="grid-cell"></div><divclass="grid-cell"></div><divclass="grid-cell"></div></div><!-- Mixed Vertical Alignment --><divclass="grid grid--top"><divclass="grid-cell"></div><divclass="grid-cell grid-cell--center"></div><divclass="grid-cell grid-cell--bottom"></div></div>

More examples coming soon. See source files for more options.

It's recommended to use this plugin along with autoprefixer to maintain cross-browser [support] (http://caniuse.com/#feat=flexbox).

Requirements

• Sass >= 3.4.x
• include-media

Installation

• Manually: Download this file and import it into your Sass project
• npm: Run npm install include-media-grid
• Bower: Run bower install include-media-grid

Inspiration

• philipwalton.github.io/solved-by-flexbox/demos/grids
• [github.com/eduardoboucas/include-media-columns](https://github.com/e duardoboucas/include-media-columns)

Author

Tomasz Szarzynski