Change CSS class based on number (length) of entity reference items, in a paragraph entity In my paragraph twig file paragraph--call-to-actions.html.twig, I want to render and build up the entity reference items (the child items from a certain Paragraph type).

There could be 3 or 4 items. Based on the length of the items (3 or 4) I want to change the markup/change a CSS class so I could have 3 or 4 columns.

In paragraph--call-to-actions.html.twig I could do something like:

{% if content.field_call_to_actions|length == 3 %}
  {# Build 3 column item markup here #}
{% elseif content.field_call_to_actions|length == 4 %}
  {# Build 4 column item markup here #}


But how do I loop through my entity reference items (Paragraph type items) so I can print all of the fields of my paragraph type?

Or is there a cleaner approach?

Update:
I found a solution by extending field.html.twig to field--paragraph--call-to-actions.html.twig and in there:

{% for item in items %}

  &lt;div class="card mx-6 md:mx-4 mb-6 md:mb-0
  {% if items|length == 3 %}
    md:w-1/3
  {% elseif items|length == 4 %}
    md:w-1/2 lg:w-1/4
  {% endif %}
  "&gt;
    {{ item.content }}
  &lt;/div&gt;

{% endfor %}


I can't use loop.lenght here because of the different breakpoints.

Can I write this more cleaner without duplicate classes (DRY)?
{% for action in paragraph.field_call_to_actions %}
    {{ paragraph.action.value }}
{% endfor %}