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>