layout-views-grid-horizontal.pcss.css

Responsive styles for views grid horizontal layout.

File

core/themes/olivero/css/layout/layout-views-grid-horizontal.pcss.css

View source 
  1. /**

  2.  * @file

  3.  * Responsive styles for views grid horizontal layout.

  4.  */

  5. 

  6. @import "../base/variables.pcss.css";

  7. 

  8. :root {

  9.   --views-grid-layout-gap: var(--sp);

  10. }

  11. 

  12. .views-view-grid--horizontal {

  13.   display: flex;

  14.   flex-wrap: wrap;

  15. 

  16.   &.cols-1 {

  17.     & > * {

  18.       flex-basis: 100%;

  19.       margin-inline-end: 0;

  20.     }

  21.   }

  22. 

  23.   &.cols-2 {

  24.     & > * {

  25.       flex-basis: 100%;

  26.       margin-inline-end: 0;

  27. 

  28.       /* 2 column layout. */

  29.       @media (--md) {

  30.         flex-basis: calc(100% / 2 - (((2 - 1) / 2) * var(--views-grid-layout-gap)));

  31.         margin-inline-end: var(--views-grid-layout-gap);

  32. 

  33.         &:nth-child(2n) {

  34.           margin-inline-end: 0;

  35.         }

  36.       }

  37.     }

  38.   }

  39. 

  40.   &.cols-3 {

  41.     & > * {

  42.       flex-basis: 100%;

  43.       margin-inline-end: 0;

  44. 

  45.       /* 2 column layout. */

  46.       @media (--md) {

  47.         flex-basis: calc(100% / 2 - (((2 - 1) / 2) * var(--views-grid-layout-gap)));

  48.         margin-inline-end: var(--views-grid-layout-gap);

  49. 

  50.         &:nth-child(2n) {

  51.           margin-inline-end: 0;

  52.         }

  53.       }

  54. 

  55.       /* 3 column layout. */

  56.       @media (--lg) {

  57.         flex-basis: calc(100% / 3 - (((3 - 1) / 3) * var(--views-grid-layout-gap)));

  58. 

  59.         &:nth-child(2n) {

  60.           margin-inline-end: var(--views-grid-layout-gap);

  61.         }

  62. 

  63.         &:nth-child(3n) {

  64.           margin-inline-end: 0;

  65.         }

  66.       }

  67.     }

  68.   }

  69. 

  70.   &.cols-4 {

  71.     & > * {

  72.       flex-basis: 100%;

  73.       margin-inline-end: 0;

  74. 

  75.       /* 2 column layout. */

  76.       @media (--md) {

  77.         flex-basis: calc(100% / 2 - (((2 - 1) / 2) * var(--views-grid-layout-gap)));

  78.         margin-inline-end: var(--views-grid-layout-gap);

  79. 

  80.         &:nth-child(2n) {

  81.           margin-inline-end: 0;

  82.         }

  83.       }

  84. 

  85.       /* 4 column layout. */

  86.       @media (--lg) {

  87.         flex-basis: calc(100% / 4 - (((4 - 1) / 4) * var(--views-grid-layout-gap)));

  88. 

  89.         &:nth-child(2n) {

  90.           margin-inline-end: var(--views-grid-layout-gap);

  91.         }

  92. 

  93.         &:nth-child(4n) {

  94.           margin-inline-end: 0;

  95.         }

  96.       }

  97.     }

  98.   }

  99. 

  100.   &.cols-5 {

  101.     & > * {

  102.       flex-basis: 100%;

  103.       margin-inline-end: 0;

  104. 

  105.       /* 2 column layout. */

  106.       @media (--sm) {

  107.         flex-basis: calc(100% / 2 - (((2 - 1) / 2) * var(--views-grid-layout-gap)));

  108.         margin-inline-end: var(--views-grid-layout-gap);

  109. 

  110.         &:nth-child(2n) {

  111.           margin-inline-end: 0;

  112.         }

  113.       }

  114. 

  115.       /* 3 column layout. */

  116.       @media (--md) {

  117.         flex-basis: calc(100% / 3 - (((3 - 1) / 3) * var(--views-grid-layout-gap)));

  118. 

  119.         &:nth-child(2n) {

  120.           margin-inline-end: var(--views-grid-layout-gap);

  121.         }

  122. 

  123.         &:nth-child(3n) {

  124.           margin-inline-end: 0;

  125.         }

  126.       }

  127. 

  128.       /* 5 column layout. */

  129.       @media (--lg) {

  130.         flex-basis: calc(100% / 5 - (((5 - 1) / 5) * var(--views-grid-layout-gap)));

  131. 

  132.         &:nth-child(3n) {

  133.           margin-inline-end: var(--views-grid-layout-gap);

  134.         }

  135. 

  136.         &:nth-child(5n) {

  137.           margin-inline-end: 0;

  138.         }

  139.       }

  140.     }

  141.   }

  142. 

  143.   &.cols-6 {

  144.     & > * {

  145.       flex-basis: 100%;

  146.       margin-inline-end: 0;

  147. 

  148.       /* 2 column layout. */

  149.       @media (--sm) {

  150.         flex-basis: calc(100% / 2 - (((2 - 1) / 2) * var(--views-grid-layout-gap)));

  151.         margin-inline-end: var(--views-grid-layout-gap);

  152. 

  153.         &:nth-child(2n) {

  154.           margin-inline-end: 0;

  155.         }

  156.       }

  157. 

  158.       /* 3 column layout. */

  159.       @media (--md) {

  160.         flex-basis: calc(100% / 3 - (((3 - 1) / 3) * var(--views-grid-layout-gap)));

  161. 

  162.         &:nth-child(2n) {

  163.           margin-inline-end: var(--views-grid-layout-gap);

  164.         }

  165. 

  166.         &:nth-child(3n) {

  167.           margin-inline-end: 0;

  168.         }

  169.       }

  170. 

  171.       /* 6 column layout. */

  172.       @media (--lg) {

  173.         flex-basis: calc(100% / 6 - (((6 - 1) / 6) * var(--views-grid-layout-gap)));

  174. 

  175.         &:nth-child(3n) {

  176.           margin-inline-end: var(--views-grid-layout-gap);

  177.         }

  178. 

  179.         &:nth-child(6n) {

  180.           margin-inline-end: 0;

  181.         }

  182.       }

  183.     }

  184.   }

  185. 

  186.   &.cols-7 {

  187.     & > * {

  188.       flex-basis: 100%;

  189.       margin-inline-end: 0;

  190. 

  191.       /* 2 column layout. */

  192.       @media (--sm) {

  193.         flex-basis: calc(100% / 2 - (((2 - 1) / 2) * var(--views-grid-layout-gap)));

  194.         margin-inline-end: var(--views-grid-layout-gap);

  195. 

  196.         &:nth-child(2n) {

  197.           margin-inline-end: 0;

  198.         }

  199.       }

  200. 

  201.       /* 3 column layout. */

  202.       @media (--md) {

  203.         flex-basis: calc(100% / 3 - (((3 - 1) / 3) * var(--views-grid-layout-gap)));

  204. 

  205.         &:nth-child(2n) {

  206.           margin-inline-end: var(--views-grid-layout-gap);

  207.         }

  208. 

  209.         &:nth-child(3n) {

  210.           margin-inline-end: 0;

  211.         }

  212.       }

  213. 

  214.       /* 7 column layout. */

  215.       @media (--lg) {

  216.         flex-basis: calc(100% / 7 - (((7 - 1) / 7) * var(--views-grid-layout-gap)));

  217. 

  218.         &:nth-child(3n) {

  219.           margin-inline-end: var(--views-grid-layout-gap);

  220.         }

  221. 

  222.         &:nth-child(7n) {

  223.           margin-inline-end: 0;

  224.         }

  225.       }

  226.     }

  227.   }

  228. 

  229.   &.cols-8 {

  230.     & > * {

  231.       flex-basis: 100%;

  232.       margin-inline-end: 0;

  233. 

  234.       /* 2 column layout. */

  235.       @media (--sm) {

  236.         flex-basis: calc(100% / 2 - (((2 - 1) / 2) * var(--views-grid-layout-gap)));

  237.         margin-inline-end: var(--views-grid-layout-gap);

  238. 

  239.         &:nth-child(2n) {

  240.           margin-inline-end: 0;

  241.         }

  242.       }

  243. 

  244.       /* 4 column layout. */

  245.       @media (--md) {

  246.         flex-basis: calc(100% / 4 - (((4 - 1) / 4) * var(--views-grid-layout-gap)));

  247. 

  248.         &:nth-child(2n) {

  249.           margin-inline-end: var(--views-grid-layout-gap);

  250.         }

  251. 

  252.         &:nth-child(4n) {

  253.           margin-inline-end: 0;

  254.         }

  255.       }

  256. 

  257.       /* 8 column layout. */

  258.       @media (--lg) {

  259.         flex-basis: calc(100% / 8 - (((8 - 1) / 8) * var(--views-grid-layout-gap)));

  260. 

  261.         &:nth-child(4n) {

  262.           margin-inline-end: var(--views-grid-layout-gap);

  263.         }

  264. 

  265.         &:nth-child(8n) {

  266.           margin-inline-end: 0;

  267.         }

  268.       }

  269.     }

  270.   }

  271. 

  272.   & > * {

  273.     flex-grow: 0;

  274.     flex-shrink: 0;

  275.     margin-block-end: var(--views-grid-layout-gap);

  276.   }

  277. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.