Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- web:drupal:theme:views [2022/09/12 08:00] – 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 {
+  /**
+   * User input values.
+   */
+  --grid-layout-gap: 10px;
+  --grid-column-count: 4;
+  --grid-item--min-width: 100px;
+  /**
+   * Calculated values.
+   */
+  --gap-count: calc(var(--grid-column-count) - 1);
+  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
+  --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(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
+  grid-gap: var(--grid-layout-gap);
+}
+</file>