grid-css

#Grid Simple grid for flexible layouts.

Uses flexbox to produce flexible easy to use classes for rows and columns.

There are 2 versions of Grid. A modern version and one with -prefixes- for better browser support.

##Contents

1. Install
2. Basic grid
3. Nesting
4. Widths
5. Offsets
6. Wrapping
7. Vertical alignment
8. Responsiveness
9. Utility classes
10. Credits

##How to use

###Install

bower install wiz-grid

To find out what versions are available

bower info wiz-grid

###Basic grid

.grid {
  display: flex;
}
.cell {
  flex: 1;
  box-sizing: border-box;
}

####Example

<div class="grid">
  <div class="cell">first</div>
  <div class="cell">second</div>
  <div class="cell">third</div>
</div>

This will create a simple flexible row of cells.

-------------------------------------
| first    | second     | third     |
-------------------------------------

###Nesting

You can nest grids inside cells with relative ease...

####Example

<div class="grid">
  <div class="cell">
    <div class="grid">
      <div class="cell">first</div>
      <div class="cell">second</div>
    </div>
    <div class="grid">
      <div class="cell">third</div>
      <div class="cell">fourth</div>
    </div>
  </div>
  <div class="cell">fifth</div>
</div>

Little complicated to explain. This is what it should produce:

-------------------------------------
| first      | second     | fifth   |
--------------------------|         |
| third      | fourth     |         |
-------------------------------------

###Widths

.cell-width-20 {
  flex: 0 0 20%;
}

####Example

<div class="grid">
  <div class="cell cell-width-20">first</div>
  <div class="cell">second</div>
  <div class="cell">third</div>
</div>

In this example the first cell is 20% the width of the grid, the other two share the remaining space equally.

-------------------------------------
| first        | second   | third   |
-------------------------------------

###Offsets

.cell-offset-20 {
  margin-left: 20%;
}

####Example

<div class="grid">
  <div class="cell cell-width-10">first</div>
  <div class="cell cell-width-10 cell-offset-80">second</div>
</div>

Adding cell-offset-80 will add a margin-left: 80% to the cell, pushing it right.

---------                  ----------
| first |                  | second |
---------                  ----------

###Wrapping

.grid-wrap {
  flex-wrap: wrap;
}

####Example

Here we have 2 cells, 50% and 66.6666% wide, but the grid is only 100% wide...

<div class="grid">
  <div class="cell cell-width-50">first</div>
  <div class="cell cell-width-66">second</div>
</div>

this means the cells are now in control and have broken out of their confinment!

<div class="grid grid-wrap">
  <div class="cell cell-width-50">first</div>
  <div class="cell cell-width-66">second</div>
</div>

Adding grid-wrap will push the second cell down under the first cell.

-------------------
| first           |
-------------------
-----------------------
| second              |
-----------------------

Why not just make this default behaviour? Leaving this option to the developer provides more flexibility.

###Vertical alignment

/* All cells */
.grid-top {
  align-items: flex-start;
}
.grid-center {
  align-items: center;
}
.grid-bottom {
  align-items: flex-end;
}

/* Individual cells */
.cell-top {
  align-self: flex-start;
}
.cell-center {
  align-self: center;
}
.cell-bottom {
  align-self: flex-end;
}

####Example

<div class="grid grid-bottom">
  <div class="cell cell-top">first</div>
  <div class="cell cell-center">second</div>
  <div class="cell">third</div> <!-- grid-bottom pushes this to the bottom -->
  <div class="cell">fourth
    <br>fourth
    <br>fourth
    <br>fourth
    <br>fourth
    <br>
  </div>
</div>

Notice there are two vertical aligment rules being applied to this grid. A grid wide rule of grid-bottom that pushes everything to the bottom, and per cell alignment rules of cell-top and cell-center that vertically align the cells to the top and center of the grid respectively.

------------                        -------------
| first    |                        | fourth    |
------------                        |           |
                                    | fourth    |
            -------------           |           |
            | second    |           | fourth    |
            -------------           |           |
                                    | fourth    |
                        -------------           |
                        | third     | fourth    |
                        -------------------------

###Responsiveness

@media (min-width: 24em) and (max-width: 48em) {
  .grid-medium-fit > .cell:not([class*="cell-width"]) {
    flex: 1;
  }
  .grid-medium-full {
    flex-wrap: wrap;
  }
  .grid-medium-full > .cell {
    flex: 0 0 100%;
    margin-left: 0;
  }
}

####Example

Let's make this grid thing respond to different screen sizes...

<div class="grid grid-small-full grid-medium-fit grid-large-full">
  <div class="cell cell-top">first</div>
  <div class="cell cell-center">second</div>
  <div class="cell">third</div> <!-- grid-bottom pushes this to bottom -->
  <div class="cell">fourth
    <br>fourth
    <br>fourth
    <br>fourth
    <br>fourth
    <br>
  </div>
</div>

• .grid-small-full this rule makes the cells full width but only when the screen is small
• .grid-medium-fit makes the cells share the space, but only for medium screens
• .grid-large-full turns it all into columns again

###Utility classes

There are some handy "make visible when small" and "hide when large" rules for you to play with.

.visible-small {
  display: none;
}
.hidden-medium {
  display: none;
}
.hidden-large {
  display: none;
}

#####Credits http://philipwalton.github.io/solved-by-flexbox/demos/grids/

http://ionicframework.com/docs/components/#grid

http://getbootstrap.com/css/#grid

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

#####Licence

Grid is covered by the MIT Licence

Copyright (c) 2014 Grumpy Wizards

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.