You are here

grid.css in Drupal 10

Same filename and directory in other branches
  1. 9 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. /*
  12. * Media query breakpoints.
  13. * Processed by postcss/postcss-custom-media.
  14. */
  15. /* Navigation related breakpoints */
  16. /* Grid related breakpoints */
  17. /* Grid shifts from 6 to 14 columns. */
  18. /* Width of the entire grid maxes out. */
  19. .grid-full {
  20. display: grid;
  21. grid-template-rows: 1fr;
  22. grid-template-columns: repeat(var(--grid-col-count), minmax(0, 1fr));
  23. grid-column-gap: var(--grid-gap)
  24. /* .grid-full classes nested 3 or more deep go full width. */
  25. }
  26. .grid-full .grid-full .grid-full {
  27. display: block;
  28. }
  29. /*
  30. If the .grid-full is nested within the following, apply the appropriate number of columns.
  31. - .layout--content-narrow class.
  32. - Element that's inheriting the layout--content-narrow styles from its parent region.
  33. */
  34. @media (min-width: 43.75rem) {
  35. .layout--content-narrow .grid-full,
  36. .layout--pass--content-narrow > * .grid-full {
  37. grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr))
  38. }
  39. }
  40. @media (min-width: 62.5rem) {
  41. .layout--content-narrow .grid-full,
  42. .layout--pass--content-narrow > * .grid-full {
  43. grid-template-columns: repeat(calc(var(--grid-col-count) - 6), minmax(0, 1fr))
  44. }
  45. }
  46. /*
  47. If the .grid-full is nested within the following, apply the appropriate number of columns.
  48. - .layout--content-medium class.
  49. - Element that's inheriting the layout--content-medium styles from its parent region.
  50. */
  51. @media (min-width: 43.75rem) {
  52. .layout--content-medium .grid-full,
  53. .layout--pass--content-medium > * .grid-full {
  54. grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr))
  55. }
  56. }
  57. @media (min-width: 62.5rem) {
  58. .layout--content-medium .grid-full,
  59. .layout--pass--content-medium > * .grid-full {
  60. grid-template-columns: repeat(calc(var(--grid-col-count) - 4), minmax(0, 1fr))
  61. }
  62. }