You are here

Home » API reference » Drupal 10

layout-views-grid.css in Drupal 10

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.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. /**

  9.  * @file

  10.  * Responsive styles for views grid horizontal layout.

  11.  *

  12.  * This creates the correct count of columns and automatically resizes the

  13.  * grid-items to fit into it. The grid-items will flow onto the next row when

  14.  * they reach the --views-grid-item--min-width value.

  15.  */

  16. 

  17. /*

  18.  * Media query breakpoints.

  19.  * Processed by postcss/postcss-custom-media.

  20.  */

  21. 

  22. /* Navigation related breakpoints */

  23. 

  24. /* Grid related breakpoints */

  25. 

  26. /* Grid shifts from 6 to 14 columns. */

  27. 

  28. /* Width of the entire grid maxes out. */

  29. 

  30. .views-view-grid {

  31.   --views-grid--layout-gap: var(--sp);

  32.   --views-grid--column-count: 4; /* Will be overridden by an inline style. */

  33.   --views-grid-item--min-width: 6.25rem;

  34. }

  35. 

  36. .views-view-grid--horizontal {

  37.   /**

  38.    * Calculated values.

  39.    */

  40.   --views-grid--gap-count: calc(var(--views-grid--column-count) - 1);

  41.   --views-grid--total-gap-width: calc(var(--views-grid--gap-count) * var(--views-grid--layout-gap));

  42.   --views-grid-item--max-width: calc((100% - var(--views-grid--total-gap-width)) / var(--views-grid--column-count));

  43. 

  44.   display: grid;

  45.   grid-template-columns: repeat(auto-fill, minmax(max(var(--views-grid-item--min-width), var(--views-grid-item--max-width)), 1fr));

  46.   grid-gap: var(--views-grid--layout-gap);

  47. }

  48. 

  49. .views-view-grid--vertical {

  50.   margin-bottom: calc(-1 * var(--views-grid--layout-gap)); /* Offset the bottom row's padding. */

  51.   column-width: var(--views-grid-item--min-width);

  52.   column-count: var(--views-grid--column-count);

  53.   grid-column-gap: var(--views-grid--layout-gap)

  54. }

  55. 

  56. .views-view-grid--vertical .views-view-grid__item > * {

  57.       padding-bottom: var(--views-grid--layout-gap);

  58.       page-break-inside: avoid;

  59.       break-inside: avoid;

  60.     }