gistfile1.txt

.three_cols {

  // min-width: 1020px

  @media (min-width: $bp-layout-6) {

    /////////////////////////
    // CSS Grid Demonstration
    /////////////////////////

    main {
      display: grid;
      grid-template-columns: calc(250px + 3%) auto;
      grid-template-rows: 300px auto 300px;
    }

    .wrapper {
      grid-column: 2 / 3;
      grid-row: 1 / 4;
    }

    .main-sidebar {
      grid-column: 1;
      grid-row: 2 / 4;
    }

    .secondary-sidebar {
      display: block;
      grid-column: 1;
      grid-row: 1 / 2;

      > div {
        background: antiquewhite;
      }
    }
  }


  /////////////////////////
  // CSS Grid Demonstration
  /////////////////////////

  @media (min-width: 1100px) {

    main {
      grid-template-rows: auto 300px;
    }

    .main-sidebar {
      grid-row: 1 / 2;
    }

    .secondary-sidebar {
      grid-row: 2;
    }
  }

  /////////////////////////
  // CSS Grid Demonstration
  /////////////////////////

  @media (min-width: 1200px) {

    main {
      grid-template-rows: 300px auto;
      grid-template-columns: minmax(calc(250px + 3%), 320px) auto;
    }

    .wrapper {
      grid-column: 2 / 3;
      grid-row: 2 / 4;
    }

    .secondary-sidebar {
      grid-column: 2 / 3;
      grid-row: 1;
    }
  }

  /////////////////////////
  // CSS Grid Demonstration
  /////////////////////////

  @media (min-width: 1300px) {

    main {
      grid-template-rows: 300px auto;
      grid-template-columns: minmax(calc(250px + 3%), 320px) auto 320px;
    }

    .wrapper {
      grid-column: 2 / 3;
      grid-row: 1 / 4;
    }

    .secondary-sidebar {
      grid-column: 3 / 4;
      grid-row: 1;
    }
  }
}