grid.css

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

Grid system.

File

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

View source
  1. /*
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/3084859
  5. * @preserve
  6. */
  7. /**
  8. * @file
  9. * Grid system.
  10. */
  11. .grid-full {
  12. display: grid;
  13. grid-template-rows: 1fr;
  14. grid-template-columns: repeat(var(--grid-col-count), minmax(0, 1fr));
  15. grid-column-gap: var(--grid-gap);
  16. /* .grid-full classes nested 3 or more deep go full width. */
  17. }
  18. .grid-full .grid-full .grid-full {
  19. display: block;
  20. }
  21. /*
  22. If the .grid-full is nested within the following, apply the appropriate number of columns.
  23. - .layout--content-narrow class.
  24. - Element that's inheriting the layout--content-narrow styles from its parent region.
  25. */
  26. @media (min-width: 43.75rem) {
  27. .layout--content-narrow .grid-full,
  28. .layout--pass--content-narrow > * .grid-full {
  29. grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr));
  30. }
  31. }
  32. @media (min-width: 62.5rem) {
  33. .layout--content-narrow .grid-full,
  34. .layout--pass--content-narrow > * .grid-full {
  35. grid-template-columns: repeat(calc(var(--grid-col-count) - 6), minmax(0, 1fr));
  36. }
  37. }
  38. /*
  39. If the .grid-full is nested within the following, apply the appropriate number of columns.
  40. - .layout--content-medium class.
  41. - Element that's inheriting the layout--content-medium styles from its parent region.
  42. */
  43. @media (min-width: 43.75rem) {
  44. .layout--content-medium .grid-full,
  45. .layout--pass--content-medium > * .grid-full {
  46. grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr));
  47. }
  48. }
  49. @media (min-width: 62.5rem) {
  50. .layout--content-medium .grid-full,
  51. .layout--pass--content-medium > * .grid-full {
  52. grid-template-columns: repeat(calc(var(--grid-col-count) - 4), minmax(0, 1fr));
  53. }
  54. }

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