mixin_grid.html

<dom-module id="mixin-grid">

  <template>

    <style is="custom-style">
      :root {

        /* Basics */

        --grid: {
          display: flex;
          flex-wrap: wrap;
          list-style: none;
          margin: 0;
          padding: 0;
        };

        --grid-cell: {
          flex: 1;
        };

        --grid-flex-cell: {
          display: flex;
        };


        /* Positioning */

        --grid--top: {
          align-items: flex-start;
        };

        --grid--bottom: {
          align-items: flex-end;
        };

        --grid--center: {
          align-items: center;
        };

        --grid--justify-center: {
          justify-content: center;
        };

        --grid-cell--top: {
          align-self: flex-start;
        };

        --grid-cell--bottom: {
          align-self: flex-end;
        };

        --grid-cell--center: {
          align-self: center;
        };


        /* Sizing */

        --grid-cell--auto-size: {
          flex: none;
        };

        --grid--fit-grid-cell: {
          flex: 1;
        };

        --grid--full-grid-cell: {
          flex: 0 0 100%;
        };

        --grid--1of2-grid-cell: {
          flex: 0 0 50%;
        };

        --grid--1of3-grid-cell: {
          flex: 0 0 33.3333%;
        };

        --grid--1of4-grid-cell: {
          flex: 0 0 25%;
        };

        /* Gutters */

        --grid--gutters: {
          margin: -var(--grid-pad) 0 var(--grid-pad) -var(--grid-pad);
        };

        --grid--gutters-grid-cell: {
          padding: var(--grid-pad) 0 0 var(--grid-pad);
        };

      }
    </style>

  </template>

</dom-module>