Nahi Pata Mujhe!

    flexgrid

    4.1.0 • Public • Published

    A unique Flexbox grid system for SCSS and Stylus that allows you to create horizontal or vertical Flexbox grids on-the-fly.

    Features

    • Ability to create vertical grids
    • Pass ratios (fractions or decimals) to assign sizing (e.g. block(1/4) would create blocks that are 1/4 the size of their container with a gutter between them)
    • Easy CSS masonry
    • Consistently sized nested gutters without any additional context needing to be passed (i.e. block(1/4) works the same if it's a top level element or nested)

    Installation

    • Just @import FlexGrid at the top of your stylesheet.

    Usage

    FlexGrid operates primarily on 2 mixins: box() and block().

    Think of box() like the container element in other grid systems - except it can work vertically as well as horizontally.

    Think of block() like the columns in other grid systems - except it can work vertically as well as horizontally.

    <section>
      <figure>...</figure>
      <figure>...</figure>
      <figure>...</figure>
    </section>
    section
      box()
     
    figure
      block(1/3)

    Now let's make those elements display vertically instead of horizontally.

    section
      box(column)
     
    figure
      block(1/3, column)

    Maybe you'd like to have one element larger than the others?

    <section>
      <figure>...</figure>
      <figure>...</figure>
    </section>
    section
      box()
     
    figure
      &:first-child
        block(2/3)
      &:last-child
        block(1/3)

    By default FlexGrid displays elements in a traditional grid. This means elements won't expand to fill their container. To change this behavior, simply use the stretch() mixin.

    <section>
      <figure>...</figure>
      <figure>...</figure>
    </section>
    section
      box()
     
    figure
      block(1/3)
      &:first-child
        stretch()

    stretch() can also be configured to create CSS masonry easily.

    <section>
      <img src="http://placehold.it/700x150&text=1">
      <img src="http://placehold.it/400x150&text=2">
      <img src="http://placehold.it/200x150&text=3">
      <img src="http://placehold.it/375x150&text=4">
      ...
    </section>
    section
      box()
     
    img
      block(1/3)
      &:first-child
        stretch(masonry)

    Finally, you may want to have a gutter for a specific grid. Just pass the $gut parameter your gutter size for both the box() and the block().

    section
      box($gut60px)
     
    figure
      block(1/3$gut60px)

    Settings

    • $gutter - The default gutter size between all grid elements.

    Note The grid, like Flexbox, takes some getting used to, but once you get the hang of it, it adds a lot of power to Flexbox by letting you size and space things according to a real grid other than just with proportions. Feel free to mix real Flexbox rules into your stylesheets as FlexGrid doesn't impede on Flexbox in any way.

    Browser Support

    • We are using both Flexbox (IE10) and calc() (IE9). So IE10+ with poor support in older Android devices.

    Install

    npm i flexgrid

    DownloadsWeekly Downloads

    6

    Version

    4.1.0

    License

    MIT

    Last publish

    Collaborators

    • corysimmons
    • jprichardson