views-view-grid-responsive.html.twig

Same filename in other branches
  1. 10 core/modules/views/templates/views-view-grid-responsive.html.twig

Default theme implementation for views to display rows in a responsive grid.

Available variables:

  • attributes: HTML attributes for the wrapping element.
  • title: The title of this group of rows.
  • view: The view object.
  • rows: The rows contained in this view.
  • options: The view plugin style options.
    • alignment: a string set to either 'horizontal' or 'vertical'.
    • columns: A number representing the max number of columns.
    • cell_min_width: A number representing the minimum width of the grid cell.
    • grid_gutter: A number representing the space between the grid cells.
  • items: A list of grid items.
    • attributes: HTML attributes for each row or column.
    • content: A list of columns or rows. Each row or column contains:
      • attributes: HTML attributes for each row or column.
      • content: The row or column contents.

See also

template_preprocess_views_view_grid_responsive()

File

core/modules/views/templates/views-view-grid-responsive.html.twig

View source
  1. {#
  2. /**
  3. * @file
  4. * Default theme implementation for views to display rows in a responsive grid.
  5. *
  6. * Available variables:
  7. * - attributes: HTML attributes for the wrapping element.
  8. * - title: The title of this group of rows.
  9. * - view: The view object.
  10. * - rows: The rows contained in this view.
  11. * - options: The view plugin style options.
  12. * - alignment: a string set to either 'horizontal' or 'vertical'.
  13. * - columns: A number representing the max number of columns.
  14. * - cell_min_width: A number representing the minimum width of the grid cell.
  15. * - grid_gutter: A number representing the space between the grid cells.
  16. * - items: A list of grid items.
  17. * - attributes: HTML attributes for each row or column.
  18. * - content: A list of columns or rows. Each row or column contains:
  19. * - attributes: HTML attributes for each row or column.
  20. * - content: The row or column contents.
  21. *
  22. * @see template_preprocess_views_view_grid_responsive()
  23. *
  24. * @ingroup themeable
  25. */
  26. #}
  27. {{ attach_library('views/views.responsive-grid') }}
  28. {%
  29. set classes = [
  30. 'views-view-responsive-grid',
  31. 'views-view-responsive-grid--' ~ options.alignment,
  32. ]
  33. %}
  34. {% set responsive_grid_styles = [
  35. '--views-responsive-grid--column-count:' ~ options.columns ~ ';',
  36. '--views-responsive-grid--cell-min-width:' ~ options.cell_min_width ~ 'px;',
  37. '--views-responsive-grid--layout-gap:' ~ options.grid_gutter ~ 'px;',
  38. ]
  39. %}
  40. {% if title %}
  41. <h3>{{ title }}</h3>
  42. {% endif %}
  43. <div{{ attributes.addClass(classes).setAttribute('style', responsive_grid_styles|join()) }}>
  44. {% for item in items %}
  45. <div class="views-view-responsive-grid__item">
  46. <div class="views-view-responsive-grid__item-inner">
  47. {{- item.content -}}
  48. </div>
  49. </div>
  50. {% endfor %}
  51. </div>

Related topics


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