Equal-width columns in Olivero

I display an entity reference field that holds 4 images (media items). By default they are displayed in 4 rows one below the other. I want to display them side by side. Olivero is the theme I am using.

If I set .grid-full to the parent element, then indeed the 4 images are arranged in columns. However, they only occupy 1 column each out of the 14 columns of the grid.

It seems I have to add something like grid-column: 1 / 3; to each image but the number of images is dynamic (can be 4 or more) therefore I cannot know the values beforehand. Let alone that I cannot select the elements individually in CSS as they don't have unique IDs.

The same scenario is really simple with Bootstrap. Assigning just col-sm would have done the trick.

I wonder if there is a solution to my issue and why in Olivero it is required to explicitly specify the span of each column.

The HTML goes like this:

<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>