views-view-grid.html.twig

{#
/**
 * @file
 * Theme override for views to display rows in a grid.
 *
 * Available variables:
 * - attributes: HTML attributes for the wrapping element.
 * - title: The title of this group of rows.
 * - view: The view object.
 * - rows: The rendered view results.
 * - options: The view plugin style options.
 *   - row_class_default: A flag indicating whether default classes should be
 *     used on rows.
 *   - col_class_default: A flag indicating whether default classes should be
 *     used on columns.
 * - items: A list of grid items. Each item contains a list of rows or columns.
 *   The order in what comes first (row or column) depends on which alignment
 *   type is chosen (horizontal or vertical).
 *   - 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 template_preprocess_views_view_grid()
 */
#}
{% if options.alignment == 'vertical' %}
  {{ attach_library('olivero/layout-views-grid-vertical') }}
{% else %}
  {{ attach_library('olivero/layout-views-grid-horizontal') }}
{% endif %}

{% set columns = options.columns <= 8 ? options.columns : 8 %}

{%
  set classes = [
    'views-view-grid',
    'views-view-grid--' ~ options.alignment,
    'cols-' ~ columns,
  ]
%}

{% if title %}
  <h3>{{ title }}</h3>
{% endif %}
<div{{ attributes.addClass(classes) }}>
  {% for row in items %}
    {% for column in row.content %}
      <div class="views-view-grid__item">
        <div class="views-view-grid__item-inner">
          {{- column.content -}}
        </div>
      </div>
    {% endfor %}
  {% endfor %}
</div>