views-responsive-grid.css

Same filename and directory in other branches
  1. 11.x core/modules/views/css/views-responsive-grid.css
  2. 10 core/modules/views/css/views-responsive-grid.css
/**
 * CSS for Views responsive grid style.
 */

.views-view-responsive-grid {
  --views-responsive-grid--layout-gap: 10px; /* Will be overridden by an inline style. */
  --views-responsive-grid--column-count: 4; /* Will be overridden by an inline style. */
  --views-responsive-grid--cell-min-width: 100px; /* Will be overridden by an inline style. */
}

.views-view-responsive-grid--horizontal {
  /**
   * Calculated values.
   */
  --views-responsive-grid--gap-count: calc(var(--views-responsive-grid--column-count) - 1);
  --views-responsive-grid--total-gap-width: calc(var(--views-responsive-grid--gap-count) * var(--views-responsive-grid--layout-gap));
  --views-responsive-grid-item--max-width: calc((100% - var(--views-responsive-grid--total-gap-width)) / var(--views-responsive-grid--column-count));
  --views-responsive-grid-item--calculated-min-width: min(100%, var(--views-responsive-grid--cell-min-width)); /* Ensure that cell minimum width does not overflow container. */

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--views-responsive-grid-item--calculated-min-width), var(--views-responsive-grid-item--max-width)), 1fr));
  gap: var(--views-responsive-grid--layout-gap);
}

.views-view-responsive-grid--vertical {
  margin-bottom: calc(var(--views-responsive-grid--layout-gap) * -1); /* Offset the bottom row's padding. */
  column-width: var(--views-responsive-grid--cell-min-width);
  column-count: var(--views-responsive-grid--column-count);
  column-gap: var(--views-responsive-grid--layout-gap);
}

.views-view-responsive-grid--vertical .views-view-responsive-grid__item > * {
  padding-bottom: var(--views-responsive-grid--layout-gap);
  page-break-inside: avoid;
  break-inside: avoid;
}

File

View on git.drupalcode.org

core/modules/views/css/views-responsive-grid.css

View source 
  1. /**

  2.  * CSS for Views responsive grid style.

  3.  */

  4. 

  5. .views-view-responsive-grid {

  6.   --views-responsive-grid--layout-gap: 10px; /* Will be overridden by an inline style. */

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

  8.   --views-responsive-grid--cell-min-width: 100px; /* Will be overridden by an inline style. */

  9. }

  10. 

  11. .views-view-responsive-grid--horizontal {

  12.   /**

  13.    * Calculated values.

  14.    */

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

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

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

  18.   --views-responsive-grid-item--calculated-min-width: min(100%, var(--views-responsive-grid--cell-min-width)); /* Ensure that cell minimum width does not overflow container. */

  19. 

  20.   display: grid;

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

  22.   gap: var(--views-responsive-grid--layout-gap);

  23. }

  24. 

  25. .views-view-responsive-grid--vertical {

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

  27.   column-width: var(--views-responsive-grid--cell-min-width);

  28.   column-count: var(--views-responsive-grid--column-count);

  29.   column-gap: var(--views-responsive-grid--layout-gap);

  30. }

  31. 

  32. .views-view-responsive-grid--vertical .views-view-responsive-grid__item > * {

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

  34.   page-break-inside: avoid;

  35.   break-inside: avoid;

  36. }

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