Grid Element

Responsive grid element using Polymer and Flexbox

Bower

$ bower install grid-element

npm

$ npm install grid-element

index.html

<!doctype html>
<html>
  <head>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="bower_components/grid-element/grid-element.html">
  </head>
  <body>
    <grid-element>
      <grid-col></grid-col>
      <grid-col></grid-col>
      <grid-col></grid-col>
      <grid-col></grid-col>
    </grid-element>
  </body>
</html>

Custom media query

<grid-element mq="(min-width: 600px)">
  <grid-col></grid-col>
  <grid-col></grid-col>
  <grid-col></grid-col>
  <grid-col></grid-col>
</grid-element>

Column stretching factor

<grid-element>
  <grid-col s="3"></grid-col>
  <grid-col></grid-col>
  <grid-col></grid-col>
  <grid-col></grid-col>
</grid-element>

Children alignment

Start

<grid-element start>
  <grid-col></grid-col>
  <grid-col></grid-col>
  <grid-col></grid-col>
  <grid-col></grid-col>
</grid-element>

Center

<grid-element center>
  <grid-col></grid-col>
  <grid-col></grid-col>
  <grid-col></grid-col>
  <grid-col></grid-col>
</grid-element>

End

<grid-element end>
  <grid-col></grid-col>
  <grid-col></grid-col>
  <grid-col></grid-col>
  <grid-col></grid-col>
</grid-element>

Individual alignment

<grid-element>
  <grid-col></grid-col>
  <grid-col start></grid-col>
  <grid-col center></grid-col>
  <grid-col end></grid-col>
  <grid-col stretch></grid-col>
</grid-element>

Gutters

ghi: inner horizontal gutters

<grid-element ghi>
  <grid-col></grid-col>
  <grid-col></grid-col>
  <grid-col></grid-col>
</grid-element>

gho: outer horizontal gutters

<grid-element ghi gho>
  <grid-col></grid-col>
  <grid-col></grid-col>
  <grid-col></grid-col>
</grid-element>

gvi: inner vertical gutters

<grid-element ghi gho gvi>
  <grid-col></grid-col>
  <grid-col></grid-col>
  <grid-col></grid-col>
</grid-element>

gvo: outer vertical gutters

<grid-element ghi gho gvi gvo>
  <grid-col></grid-col>
  <grid-col></grid-col>
  <grid-col></grid-col>
</grid-element>

gs: gutter size

<grid-element ghi gho gvi gvo gs="25px">
  <grid-col></grid-col>
  <grid-col></grid-col>
  <grid-col></grid-col>
</grid-element>

Specific gutter size

<grid-element ghi gho="50px" gvi gvo="5px" gs="25px">
  <grid-col></grid-col>
  <grid-col></grid-col>
  <grid-col></grid-col>
</grid-element>