grid.css

Same filename in other branches
  1. 10 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: -ms-grid;
  13. display: grid;
  14. -ms-grid-rows: 1fr;
  15. grid-template-rows: 1fr;
  16. -ms-grid-columns: (minmax(0, 1fr))[6];
  17. grid-template-columns: repeat(6, minmax(0, 1fr));
  18. grid-column-gap: 1.125rem;
  19. /* .grid-full classes nested 3 or more deep go full width. */
  20. }
  21. .grid-full .grid-full .grid-full {
  22. display: block;
  23. }
  24. @media (min-width: 43.75rem) {
  25. .grid-full {
  26. -ms-grid-columns: (minmax(0, 1fr))[14];
  27. grid-template-columns: repeat(14, minmax(0, 1fr));
  28. grid-column-gap: 2.25rem;
  29. }
  30. }
  31. /*
  32. If the .grid-full is nested within the following, apply the appropriate number of columns.
  33. - .layout--content-narrow class.
  34. - Element that's inheriting the layout--content-narrow styles from its parent region.
  35. */
  36. @media (min-width: 43.75rem) {
  37. .layout--content-narrow .grid-full,
  38. .layout--pass--content-narrow > * .grid-full {
  39. -ms-grid-columns: (minmax(0, 1fr))[ 12 ];
  40. grid-template-columns: repeat(12, minmax(0, 1fr));
  41. }
  42. }
  43. @media (min-width: 62.5rem) {
  44. .layout--content-narrow .grid-full,
  45. .layout--pass--content-narrow > * .grid-full {
  46. -ms-grid-columns: (minmax(0, 1fr))[ 8 ];
  47. grid-template-columns: repeat(8, minmax(0, 1fr));
  48. }
  49. }
  50. /*
  51. If the .grid-full is nested within the following, apply the appropriate number of columns.
  52. - .layout--content-medium class.
  53. - Element that's inheriting the layout--content-medium styles from its parent region.
  54. */
  55. @media (min-width: 43.75rem) {
  56. .layout--content-medium .grid-full,
  57. .layout--pass--content-medium > * .grid-full {
  58. -ms-grid-columns: (minmax(0, 1fr))[ 12 ];
  59. grid-template-columns: repeat(12, minmax(0, 1fr));
  60. }
  61. }
  62. @media (min-width: 62.5rem) {
  63. .layout--content-medium .grid-full,
  64. .layout--pass--content-medium > * .grid-full {
  65. -ms-grid-columns: (minmax(0, 1fr))[ 10 ];
  66. grid-template-columns: repeat(10, minmax(0, 1fr));
  67. }
  68. }

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