grid.pcss.css

Same filename in other branches
  1. 9 core/themes/olivero/css/layout/grid.pcss.css
  2. 11.x core/themes/olivero/css/layout/grid.pcss.css

Grid system.

File

core/themes/olivero/css/layout/grid.pcss.css

View source
  1. /**
  2. * @file
  3. * Grid system.
  4. */
  5. @import "../base/media-queries.pcss.css";
  6. .grid-full {
  7. display: grid;
  8. grid-template-rows: 1fr;
  9. grid-template-columns: repeat(var(--grid-col-count), minmax(0, 1fr));
  10. grid-column-gap: var(--grid-gap);
  11. /* .grid-full classes nested 3 or more deep go full width. */
  12. & .grid-full .grid-full {
  13. display: block;
  14. }
  15. }
  16. /*
  17. If the .grid-full is nested within the following, apply the appropriate number of columns.
  18. - .layout--content-narrow class.
  19. - Element that's inheriting the layout--content-narrow styles from its parent region.
  20. */
  21. .layout--content-narrow .grid-full,
  22. .layout--pass--content-narrow > * .grid-full {
  23. @media (--grid-md) {
  24. grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr));
  25. }
  26. @media (--lg) {
  27. grid-template-columns: repeat(calc(var(--grid-col-count) - 6), minmax(0, 1fr));
  28. }
  29. }
  30. /*
  31. If the .grid-full is nested within the following, apply the appropriate number of columns.
  32. - .layout--content-medium class.
  33. - Element that's inheriting the layout--content-medium styles from its parent region.
  34. */
  35. .layout--content-medium .grid-full,
  36. .layout--pass--content-medium > * .grid-full {
  37. @media (--grid-md) {
  38. grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr));
  39. }
  40. @media (--lg) {
  41. grid-template-columns: repeat(calc(var(--grid-col-count) - 4), minmax(0, 1fr));
  42. }
  43. }

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