How to realize a css image gallery whose images are organized by rows first [closed]

I try to build a specific image gallery. Visually speaking, the one below perfectfly matches my wishes. But I would like the images order themselves first by rows not by columns which is the case in my code. Here it is:

enter image description here

The html code:

<div class="gallery"><div class="gallery-wrapper"><div><img src="assets/image01" /></div><div><img src="assets/image02" /></div><div><img src="assets/image03" /></div><div><img src="assets/image04" /></div><div><img src="assets/image05" /></div><div><img src="assets/image06" /></div></div>

And this is the css:

.gallery {  height: auto;  display: flex;  justify-content: center;  text-align: center;}.gallery-wrapper {  column-count: 3;  column-gap: 6px;   width: 90%; }

I try also to use a grid layout (see below). Here, the images display themselves by rows first, which is what I want. But the gaps between two images of a same column are not the same, which spoils the visual harmony that the gallery of the first code had.

.gallery-wrapper {  display: grid;  grid-template-columns: repeat(3, 1fr);}.gallery-wrapper div {  width: 100%;   height: auto !important;  display: flex;}.gallery-wrapper img {  width: 100% !important;  height: auto !important;  align-self: start;}

This is the disgracious but correctly ordered gallery I obtain:

enter image description here

How can i obtain the best of both worlds?Thank you in advance!

Didier