layout-views-grid.pcss.css

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

Responsive styles for views grid horizontal layout.

This creates the correct count of columns and automatically resizes the grid-items to fit into it. The grid-items will flow onto the next row when they reach the --views-grid-item--min-width value.

File

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

View source
  1. /**
  2. * @file
  3. * Responsive styles for views grid horizontal layout.
  4. *
  5. * This creates the correct count of columns and automatically resizes the
  6. * grid-items to fit into it. The grid-items will flow onto the next row when
  7. * they reach the --views-grid-item--min-width value.
  8. */
  9. @import "../base/media-queries.pcss.css";
  10. .views-view-grid {
  11. --views-grid--layout-gap: var(--sp);
  12. --views-grid--column-count: 4; /* Will be overridden by an inline style. */
  13. --views-grid-item--min-width: 100px;
  14. }
  15. .views-view-grid--horizontal {
  16. /**
  17. * Calculated values.
  18. */
  19. --views-grid--gap-count: calc(var(--views-grid--column-count) - 1);
  20. --views-grid--total-gap-width: calc(var(--views-grid--gap-count) * var(--views-grid--layout-gap));
  21. --views-grid-item--max-width: calc((100% - var(--views-grid--total-gap-width)) / var(--views-grid--column-count));
  22. display: grid;
  23. grid-template-columns: repeat(auto-fill, minmax(max(var(--views-grid-item--min-width), var(--views-grid-item--max-width)), 1fr));
  24. grid-gap: var(--views-grid--layout-gap);
  25. }
  26. .views-view-grid--vertical {
  27. margin-block-end: calc(-1 * var(--views-grid--layout-gap)); /* Offset the bottom row's padding. */
  28. column-width: var(--views-grid-item--min-width);
  29. column-count: var(--views-grid--column-count);
  30. column-gap: var(--views-grid--layout-gap);
  31. & .views-view-grid__item {
  32. & > * {
  33. padding-block-end: var(--views-grid--layout-gap);
  34. break-inside: avoid;
  35. }
  36. }
  37. }

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