novice to intermediate with HTML/CSS. I’ve been building this gallery, and I have everything perfect, except for the fact that it reads the gallery items top to bottom in sequential order. **I need it to read left to right, and otherwise stay as it is. **

I’ve tried all kinds of things to correct it: changing the setup to flex, changing the setup to inline grid, almost all of which just results in everything turning into a giant column stacked one on top of the other, or a giant row scrolling sideways off-screen, no matter if I set the column count, item / row/ column widths, heights, etc. I have yet to find another way to result in a neat, wrapped, fit gallery of divs that will flow left to right as needed.

Here’s the CSS for the gallery.

@media screen and (min-width: 601px) and (orientation:landscape) {

    .gallery {
      display:flow;
    columns: 5;

    }

    .gallery img {
      max-width: 100%;
      z-index:10;
      border-radius: 8px;
      box-shadow: 0 0 .5em #333;
      transition: all 1.5s ease;
        background-color: #ced3dd;
    }

    .gallery .content {
        padding: 4px;
    }

    .gallery .gallery-item {
      transition: all 0.5s ease;
        display:inline-grid;
      cursor: pointer;
        margin: 8px auto;
         background-color: #8d929d;
        border: solid 2px #1e376a;
        padding: 5px;
        box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
        border-radius: 5px;
        }

    .gallery .gallery-item .infoCard {
        display:block;
        position:relative;
        margin-top: 1em;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .gallery .gallery-item .infoCard h4 {
        font-size:1.25em;
        font-weight:500;
    }

    .gallery .gallery-item .infoCard .artDesc {
        font-size: .9em;
    }

    .gallery .gallery-item .infoCard .artYear {
        font-weight:600;
        font-size:1em
    }

    .gallery .gallery-item:hover {
      transform: scale(1.025);
      border-image: linear-gradient(90deg, rgba(115,70,155,1), rgba(208,50,98,1), rgba(251,177,116,1), rgba(237,38,45,1)) 30;
      background-color: #ced3dd;
        color: #18294c!important;
    }

    

}

/**Tablet Styling**/
@media screen and (min-width: 38em) and (max-width: 60em) {
  .gallery {
   columns: 3!important;
  }
}

/**Mobile Styling**/
@media screen and (min-width: 6em) and (max-width: 37em) and (orientation: portrait) {
  .gallery {
      columns: none;
      wrap: nowrap;
    }
    
  .gallery img {
      max-width: 100%;
      z-index:10;
      border-radius: .25em;
      box-shadow: 0 0 .2em #333;
      transition: all 1.5s ease;
      margin-top:.25em;
    }
    
    .gallery .gallery-item {
        display:inline-grid;
      cursor:auto;
        margin: .3em auto;
        width: 100%;
         background-color: #8d929d;
        border: solid .2em #1e376a;
        padding: .5em;
        box-shadow: .3em .3em .3em rgba(0,0,0,0.5);
        border-radius: .3em;
    }
    .gallery .content {
        margin-right: auto;
        margin-left:auto;
        display:block;
    }
    .gallery .gallery-item .infoCard {
        display:block;
        position:relative;
        margin: .6em auto .5em auto;
        text-align: center;
    }
    .gallery .gallery-item h4{
        font-size:1.5em;
    }
    .gallery .gallery-item .infoCard .artDesc {
        display:none;
    }

    .gallery .gallery-item .infoCard .artYear {
        display:none;
    }
}

Small snippet of the HTML:

    <div class="gallery" id="gallery">
        <div class="gallery-item">
            <div class="content">
                <img src="https://jsbusinessproducts.com/resources/bfcimg/24_wiley-for-trigirl.jpg" alt="A digital watercolor portrait of a silver tabby with striking blue eyes. He's laying in a misty, rainbow-touched landscape." title="Wiley">
                <div class="infoCard">
                    <h4 class="artTitles">Wiley</h4>
                    <p class="artDesc">Commission for trigirl48</p>
                    <p class="artYear">2024</p>
                </div>
            </div>
        </div>
        
        <div class="gallery-item">
            <div class="content">
                <img src="https://jsbusinessproducts.com/resources/bfcimg/24_brushrain-final.jpg" alt="An anthropomorphic carolina wren holds a rainbow umbrella over a ladybug friend, surrounded by a rainy summer forest. She wears a yellow raincoat with matching 'boots' and rainbow glasses. The ladybug is reaching up to her thankfully.">
                <div class="infoCard">
                    <h4 class="artTitles">Sheltered Companions</h4>
                    <p class="artDesc">Personal illustration featured on our 2024 business cards.</p>
                    <p class="artYear">2024</p>
                </div>
            </div>
        </div>
        
        <div class="gallery-item">
            <div class="content">
                <img src="https://jsbusinessproducts.com/resources/bfcimg/24_sweetdreams-c.jpg" alt="Digital Painting: An abstract, fantastical scene of a female whiteface cockatiel sleeping with her head tucked on a curved, knotted branch, suspended in front of a crescent moon. There are strings of colorful glass baubles and ornaments woven throughout the branch, and a wind chime that dangles just to the side of her head. The scene is framed with a purple and navy starscape, with a faint orange glow radiating off the golden moon.">
                <div class="infoCard">
                    <h4 class="artTitles">Sweet Dreams, Sweet Bird</h4>
                    <p class="artDesc">Inspired by our 2019 'sweet dreams' and taken to the next level.</p>
                    <p class="artYear">2024</p>
                </div>
            </div>
        </div>
        
        <div class="gallery-item">
            <div class="content">
                <img src="https://jsbusinessproducts.com/resources/bfcimg/23_underfluffies.jpg" alt="">
                <div class="infoCard">
                    <h4 class="artTitles">Kiss My Underfluffies!</h4>
                    <p class="artDesc">Sticker design re-visit.</p>
                    <p class="artYear">2023</p>
                </div>
            </div>
        </div>
        
        <div class="gallery-item">
            <div class="content"><img src="https://jsbusinessproducts.com/resources/bfcimg/23_qgroatsnew.jpg" alt="A blue Pacific parrotlet bent over and hanging onto a banner with their tail feathers in the air, showing the viewer their 'underfluffies.' The banner reads 'KISS MY UNDERFLUFFIES' in blue text.">
                <div class="infoCard">
                    <h4 class="artTitles">Quaker Groats</h4>
                    <p class="artDesc">Part of Birb Snax 1, revisited.</p>
                    <p class="artYear">2023</p>
                </div>
            </div>
        </div>
        
        <div class="gallery-item">
            <div class="content">
                <img src="https://jsbusinessproducts.com/resources/bfcimg/23_pyrr-angels.jpg" alt="A digital illustration of a wild type green cheek conure with a light green halo above its head. There's an older version in the left corner from 2019 that isn't quite as detailed.">
                <div class="infoCard">
                    <h4 class="artTitles">Pyrrhura Conure Angels</h4>
                    <p class="artDesc">Part of the angels sticker series, revisited.</p>
                    <p class="artYear">2023</p> 
                </div>
            </div>
        </div>

    </div>