Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- web:drupal:theme:views [2022/09/12 08:02] – phoenixseo
+++ web:drupal:theme:views [2022/09/12 09:38] (aktuell) – phoenixseo
@@ Zeile 49: / Zeile 49: @@
   * https://herchel.com/articles/views-responsive-grid-added-drupal-10-core
+  * https://css-tricks.com/an-auto-filling-css-grid-with-max-columns/
   * https://www.drupal.org/project/responsive_views_grid/releases/8.x-1.1
+<file css views-view-grid.css>
+.grid-container {
   /**
- * CSS for Views responsive grid style.
+   * User input values.
- */
+   */
+  --grid-layout-gap: 10px;
+  --grid-column-count: 4;
+  --grid-item--min-width: 100px;
-.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);
+  --gap-count: calc(var(--grid-column-count) - 1);
-  --views-responsive-grid--total-gap-width: calc(var(--views-responsive-grid--gap-count) * var(--views-responsive-grid--layout-gap));
+  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
-  --views-responsive-grid-item--max-width: calc((100% - var(--views-responsive-grid--total-gap-width)) / var(--views-responsive-grid--column-count));
+  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(max(var(--views-responsive-grid--cell-min-width), var(--views-responsive-grid-item--max-width)), 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
-  gap: var(--views-responsive-grid--layout-gap);
+  grid-gap: var(--grid-layout-gap);
 }
+</file>
-.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;
-}