I pretty new to html coding so I'm not sure what I'm doing wrong, but I'm building a website with an image gallery on one of the pages.
I wanted half of the gallery to be a flex row with wrapping (flex-flow: row wrap;) for wider images and the other half set to nowrap so that the smaller images are side by side. Both galleries' images have the width set to 100% so that the images "shrink" to fit the div of the gallery.
I've tried this multiple times, like putting the second div gallery outside the first, having them separate, using fit-content, max-width to 100%, etc.They only way to make it smaller is if I manually shrink it with something like width=50%, but I don't want to set a fixed size because I want them to be responsive.
Here's the code for reference:
.page-content { display: flex; flex-flow: column; justify-content: center; grid-gap: 20px; max-width: 850px;}.gallery img { border-radius: var(--corner-rounding); max-width: 100%;}.gallery { display: flex; flex-flow: row wrap; grid-gap: 1em; align-items: baseline; justify-content: center;}.line { display: flex; flex-flow: row nowrap;}<section class="page-content"><div class="gallery"><img src="img/gb01.gif" /><img src="img/gb02.gif" /><img src="img/gb03.gif" /><img src="img/lvl1.jpg" /><img src="img/lvl2.jpg" /><img src="img/lvl3.jpg" /><div class="gallery line"><img src="img/sreenshot01.jpg" /><img src="img/sreenshot02.jpg" /><img src="img/sreenshot03.jpg" /></div></div></section>Any idea what I should do about this?
EDIT: I said above that I've already tried putting the second gallery (.line) outside the first gallery (.gallery) and it didn't work.However, I now realize that is because the section both galleries are nested in is also set to flex. Oops.
Now, while I waited for this answer I went and tried making the second gallery a grid display with auto columns. In terms of best practices, is this okay or should I be avoiding this?
.line { display: grid; grid-auto-flow: column;}Thanks to everyone who answered :^)