Coloane cu lățime egală în Olivero

Afișez un câmp de referință de entitate care conține 4 imagini (articole media). În mod implicit, acestea sunt afișate pe 4 rânduri unul sub celălalt. Vreau să le arăt una lângă alta. Olivero este tema pe care o folosesc.

Dacă am stabilit .grilă-plină la elementul părinte, atunci într-adevăr cele 4 imagini sunt aranjate în coloane. Cu toate acestea, ele ocupă doar o coloană fiecare din cele 14 coloane ale grilei.

Se pare că trebuie să adaug ceva de genul grilă-coloană: 1 / 3; la fiecare imagine, dar numărul de imagini este dinamic (poate fi 4 sau mai mult), prin urmare nu pot cunoaște valorile în prealabil. Nu mai vorbim de faptul că nu pot selecta elementele individual în CSS, deoarece nu au ID-uri unice.

Același scenariu este foarte simplu cu Bootstrap. Atribuirea doar col-sm ar fi făcut smecheria.

Mă întreb dacă există o soluție la problema mea și de ce în Olivero este necesar să se specifice în mod explicit intervalul fiecărei coloane.

HTML-ul merge astfel:

<div class="field field--name-field-screenshots field--type-entity-reference field--label-visually_hidden">
    <div class="field__label visually-hidden">Screenshots</div>
          <div class="field__items">
              <div property="schema:image" class="field__item"><a href="URL/files/styles/extra_large/public/2020-06/iPhone%208%20Plus-01LoginScreen.png" class="photoswipe" data-size="576x1024" data-overlay-title=""><img src="URL/files/styles/large/public/2020-06/iPhone%208%20Plus-01LoginScreen.png" width="270" height="480" alt="Tunedeck Login" title="" loading="lazy" typeof="foaf:Image">

</a>
</div>
          <div property="schema:image" class="field__item"><a href="URL/files/styles/extra_large/public/2020-06/iPhone%208%20Plus-02Search.png" class="photoswipe" data-size="576x1024" data-overlay-title=""><img src="URL/files/styles/large/public/2020-06/iPhone%208%20Plus-02Search.png" width="270" height="480" alt="Search Music" title="" loading="lazy" typeof="foaf:Image">

</a>
</div>
          <div property="schema:image" class="field__item"><a href="URL/files/styles/extra_large/public/2020-06/iPhone%208%20Plus-03NowPlaying_0.png" class="photoswipe" data-size="576x1024" data-overlay-title=""><img src="URL/files/styles/large/public/2020-06/iPhone%208%20Plus-03NowPlaying_0.png" width="270" height="480" alt="Now Playing" title="" loading="lazy" typeof="foaf:Image">

</a>
</div>
          <div property="schema:image" class="field__item"><a href="URL/files/styles/extra_large/public/2020-06/iPhone%208%20Plus-04Gestures.png" class="photoswipe" data-size="576x1024" data-overlay-title=""><img src="URL/files/styles/large/public/2020-06/iPhone%208%20Plus-04Gestures.png" width="270" height="480" alt="Tunedeck - Gestures" title="" loading="lazy" typeof="foaf:Image">

</a>
</div>
              </div>
      </div>