Polymer grid layout

The <polymer-grid-layout> component provides simple ways to use CSS Grid Layout

Important note:

CSS Grid is landing in several browsers in Spring 2017. Older versions of those browsers require a flag to be enabled to make use of this API. Make sure to reference the compatibility table for each property and function for more information.

Only Google Chrome 57 is supporting this feature. More about: Chrome 57: Grid based layouts

Chris House has a wonderful article about all Grid layout features: CSS tricks: A Complete Guide to Grid

Additional resources:

• CSS Grid – Table layout is back. Be there and be square.

Examples

Example 1 (Grid layout and justify-items: start)

<!-- main document apply mixins in a custom-style element -->
<style is="custom-style">
  .container {
      @apply(--layout-grid-justify-items-start);

      grid-template-columns: 200px 200px 200px;
  }

  .container > div {
      border: 1px solid rgba(0,95,107);
      border-radius: 3px;
      background-color: rgba(0, 95, 107, 0.8);
      padding: 0.2em;
      color: #fff;
      margin-bottom: 10px;
  }

  .container > div:nth-child(odd) {
      background-color: rgba(110, 195, 107, 0.8);
  }
</style>

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>

Example 2 (Grid layout and justify-items: end)

<!-- main document: apply mixins in a custom-style element -->
<style is="custom-style">
  .container {
      @apply(--layout-grid-justify-items-end);

      grid-template-columns: 200px 200px 200px;
  }

  .container > div {
      border: 1px solid rgba(0,95,107);
      border-radius: 3px;
      background-color: rgba(0, 95, 107, 0.8);
      padding: 0.2em;
      color: #fff;
      margin-bottom: 10px;
  }

  .container > div:nth-child(odd) {
      background-color: rgba(110, 195, 107, 0.8);
  }
</style>

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>

Example 3 (Grid layout and justify-items: center)

<!-- main document: apply mixins in a custom-style element -->
<style is="custom-style">
  .container {
      @apply(--layout-grid-justify-items-center);

      grid-template-columns: 200px 200px 200px;
  }

  .container > div {
      border: 1px solid rgba(0,95,107);
      border-radius: 3px;
      background-color: rgba(0, 95, 107, 0.8);
      padding: 0.2em;
      color: #fff;
      margin-bottom: 10px;
  }

  .container > div:nth-child(odd) {
      background-color: rgba(110, 195, 107, 0.8);
  }
</style>

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>

Example 4 (Grid layout and justify-items: stretch)

<!-- main document: apply mixins in a custom-style element -->
<style is="custom-style">
  .container {
      @apply(--layout-grid-justify-items-stretch);

      grid-template-columns: 200px 200px 200px;
  }

  .container > div {
      border: 1px solid rgba(0,95,107);
      border-radius: 3px;
      background-color: rgba(0, 95, 107, 0.8);
      padding: 0.2em;
      color: #fff;
      margin-bottom: 10px;
  }

  .container > div:nth-child(odd) {
      background-color: rgba(110, 195, 107, 0.8);
  }
</style>

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>