www.aleph1.co.uk Git - yaffs-website/blob - web/core/profiles/demo_umami/themes/umami/css/layout/grid-4.css

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