{% load wagtailcore_tags %}

<div {% if value.theme.style_id %}id="{{ value.theme.style_id }}"{% endif %}
     class="grid-container{% if not value.settings.fluid %} container mx-auto{% endif %}{% if value.settings.gap %} gap-{{ value.settings.gap }}{% endif %}{% if value.theme.classname %} {{ value.theme.classname }}{% endif %}"
     data-component="grid"
     data-variant="{{ value.theme.theme_variant }}">
        <div class="grid{% if value.settings.columns_layout == 'equal-2' %} grid-cols-2{% elif value.settings.columns_layout == 'equal-3' %} grid-cols-3{% elif value.settings.columns_layout == 'equal-4' %} grid-cols-4{% elif value.settings.columns_layout == 'equal-5' %} grid-cols-5{% elif value.settings.columns_layout == 'equal-6' %} grid-cols-6{% else %} grid-cols-12{% endif %}{% if value.settings.vertical_alignment %} items-{{ value.settings.vertical_alignment }}{% endif %}{% if value.settings.gap %} gap-{{ value.settings.gap }}{% endif %}">
    {% for column in value.columns %}
        {% include_block column with columns_layout=value.settings.columns_layout %}
    {% endfor %}
    </div>
</div>