https://github.com/cannercms/grid-breakpoint

Automatically add breakpoints to your grids
https://github.com/cannercms/grid-breakpoint

flexbox grid grid-breakpoint

Last synced: 6 days ago
JSON representation

Automatically add breakpoints to your grids

• Host: GitHub
• URL: https://github.com/cannercms/grid-breakpoint
• Owner: CannerCMS
• License: mit
• Created: 2016-11-01T09:23:21.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-08-29T09:15:30.000Z (about 6 years ago)
• Last Synced: 2024-10-08T06:12:39.456Z (about 1 month ago)
• Topics: flexbox, grid, grid-breakpoint
• Language: JavaScript
• Homepage: http://canner.github.io/grid-breakpoint
• Size: 854 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# grid-breakpoint [![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][daviddm-image]][daviddm-url]

> Automatically add breakpoints to your grid (This project is build on top of `flexboxgrid`, which is a 12 column grid system).

## Installation

```sh

$ npm install --save grid-breakpoint

```

## Problem in writing grids

Grid is great! But one big commonly problem in writing grids is when you have a big list of columns, you can't just push all the columns into a row.  If the containers have different height, your items will end up displaying unexpected.

So let's turn

```

  

  

  

  

  

  

  

  {....}

```

to automatically

```

  

  

  

  

  

  

  

  

  

  

```

`grid-breakpoint` automatically calculate how many columns should in a row and wrapped `` for ``!

## Usage

And add to your component as below.

**NOTICE: You need to import `react-flexbox-grid`'s css in order to let it work correctly**

```js

import React, {Component} from 'react';

import GridBreakPoint from 'grid-breakpoint';

import 'react-flexbox-grid/dist/react-flexbox-grid.css';

class GridExample extends Component {

  render() {

    const list = range(20).map((col, i) => {

      return 
{col}
;

    });


    // in this example, when the screen width is large(lg)

    // it'll wrap  as structure below

    //  ---> automaticlly wrapped

    //   

    //   

    //   

    // 

    // in md screen

    //  ---> automaticlly wrapped

    //   

    //   

    // 

    // in xs screen (xs + xsOffset = 6)

    //  ---> automaticlly wrapped

    //   

    //   

    // 

    return (

      

        {list}

      

    );

  }

}

```

## Start example server

```

npm start

```

## License

MIT © [Canner](https://github.com/canner)

[npm-image]: https://badge.fury.io/js/grid-breakpoint.svg

[npm-url]: https://npmjs.org/package/grid-breakpoint

[travis-image]: https://travis-ci.org/Canner/grid-breakpoint.svg?branch=master

[travis-url]: https://travis-ci.org/Canner/grid-breakpoint

[daviddm-image]: https://david-dm.org/Canner/grid-breakpoint.svg?theme=shields.io

[daviddm-url]: https://david-dm.org/Canner/grid-breakpoint