aleph1.co.uk Git - yaffs-website/blob - layout/grid-3.css

   1 /**
   2  * @file
   3  * This file is used to create a 3 column grid layout.
   4  */
   5
   6 .grid--3 .views-row {
   7   margin-bottom: 28px;
   8   padding: 0 14px;
   9 }
  10
  11 @media screen and (min-width: 30em) {
  12   .grid--3 {
  13     overflow-x: hidden;
  14   }
  15   .grid--3 .view-content {
  16     display: flex;
  17     flex-wrap: wrap;
  18     margin: 0;
  19   }
  20   .grid--3 .views-row {
  21     display: flex;
  22     flex-grow: 0;
  23     flex-shrink: 0;
  24     flex-basis: calc(50% - 28px);
  25     margin: 0 14px 28px;
  26     padding: 0;
  27   }
  28 }
  29
  30 @media screen and (min-width: 60em) {
  31   .grid--3 .views-row {
  32     flex-grow: 0;
  33     flex-shrink: 0;
  34     flex-basis: calc(33% - 28px);
  35   }
  36 }
  37
  38 /* 77em == the max width of .container + 1em either side */
  39 @media screen and (min-width: 77em) {
  40   .grid--3 .view-content {
  41     margin-left: -14px;
  42     margin-right: -14px;
  43   }
  44 }