Drupal Views Style Plugin: CSS Grid with Settings for Total (container) width, Column Count, Column Gap and Column Width
This is a Custom Drupal Module that adds a Views Style Plugin for CSS Grid. Reverse-Engineered from Drupal 10's internal new Grid Module.
Shows Input Fields for
- Container Width (Total width of Grid-Space)
- Column Count
- Column Gap
- Column Width
- Some Kind of "Console" that calculates the ideal Column Width, which can be put into "Column Width"
It's my first Drupal Module that is really used in a customer's Website. It works, but it may not be 100% Drupal best practice.
I'd love to have the Inputs correspond to each other und live-update the values, but I don't know how to do that. So I defined a textarea where I write the values and formulas and the result to.
Perhaps some experienced Drupal Programmer can take this to the next level. Co-Maintainer wanted. I'd love to see this little Module on Drupal.org/projects some day.
This module is exactly what you need if you want to display something in a CSS Grid that fits perfectly in its "space" (max. Container width) and breaks nicely to the next responve Breakpoints.
Inspiration and Code-Lookup:
- https://cms.devguide.at/drupal-8-9/custom-views-display-style-plugin/
- https://www.drupal.org/docs/creating-custom-modules/building-a-views-display-style-plugin-for-drupal
- https://www.osseed.com/blog/drupal-8-creating-views-display-plugin
- https://gist.github.com/lonalore/891b831e6724ae80df9b9d26b05f8a79