CSS Need tips for Gallery layout [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Some of the layouts I have been tasked with converting utilize the following layout (see image.) I'm wondering what the best way using CSS is to render a list of images accordingly. I don't want to split up the items into different row containers just to make things fit. I'm sure there's a way to create this a list.
The biggest problem I have is rendering the images with the appropriate margins in-between and having the far right image line up with the edge of the layout container (orange lines.)
Ideally, I'd like to maintain the html as something like:
<ul class="gallery-list">
<li class="gallery-list-item">
<img src="..." alt="..." />
</li>
<li class="gallery-list-item">
<img src="..." alt="..." />
</li>
</ul>
Thanks for your time and if there is a better solution, I'd be happy to close this and link to the solution.

Answer 1

This might be a solution, it might not. It makes a few assumptions like there always being four images per row but making them responsive.
The main points are:
We set the image container width a percentage of the parent container to control the number of images per row.
We use a right negative margin on the ul to offset the right margin applied to the li for image spacing.
We use calc to subtract the margin we use for spacing so all elements will fit on a single line and not begin to reflow.
I've used a couple media queries to show how you would change row count for smaller screens to make the grid responsive.
There's also a bit of padding and border applied to .container to demonstrate that the images are taking up the full width of the container.
This is just one way to do things.
body {
margin: 0;
}
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.container {
width: 80%;
margin: 50px auto;
/* following adding for demo purposes */
padding: 50px 0;
border-left: 1px solid #CCC;
border-right: 1px solid #CCC;
overflow: hidden;
}
ul {
margin-right: -5px;
}
li {
float: left;
margin: 0 5px 5px 0;
width: calc( 50% - 5px );
}
img {
display: block;
width: 100%; /* or max-width: 100%; */
height: auto;
}
#media( min-width: 550px ) {
li {
width: calc( 33.333% - 5px );
}
}
#media( min-width: 750px ) {
li {
width: calc( 25% - 5px );
}
}
<div class="container">
<ul>
<li>
<img src="http://placehold.it/200x200/fc0/&text=1">
</li>
<li>
<img src="http://placehold.it/200x200/ccc/&text=2">
</li>
<li>
<img src="http://placehold.it/200x200/fc0/&text=3">
</li>
<li>
<img src="http://placehold.it/200x200/ccc/&text=4">
</li>
<li>
<img src="http://placehold.it/200x200/fc0/&text=5">
</li>
<li>
<img src="http://placehold.it/200x200/ccc/&text=6">
</li>
<li>
<img src="http://placehold.it/200x200/fc0/&text=7">
</li>
<li>
<img src="http://placehold.it/200x200/ccc/&text=8">
</li>
</ul>
</div>

Answer 2

There are a lot of ways you could go about this. I'm partial to flexbox - this example shows it with a fixed width on the gallery, but you can use a fluid one as well. I'd recommend doing some reading about flexbox, but here's a starting place:
.gallery {
display: flex;
flex-wrap: wrap;
width: 440px;
margin: auto;
padding: 0;
list-style: none;
}
.gallery img {
margin-right: 10px;
margin-bottom: 10px;
}
<ul class="gallery">
<li>
<img src="//placehold.it/100x100" alt="Artwork">
</li>
<li>
<img src="//placehold.it/100x100" alt="Artwork">
</li>
<li>
<img src="//placehold.it/100x100" alt="Artwork">
</li>
<li>
<img src="//placehold.it/100x100" alt="Artwork">
</li>
<li>
<img src="//placehold.it/100x100" alt="Artwork">
</li>
<li>
<img src="//placehold.it/100x100" alt="Artwork">
</li>
<li>
<img src="//placehold.it/100x100" alt="Artwork">
</li>
<li>
<img src="//placehold.it/100x100" alt="Artwork">
</li>
<li>
<img src="//placehold.it/100x100" alt="Artwork">
</li>
<li>
<img src="//placehold.it/100x100" alt="Artwork">
</li>
</ul>

Answer 3

You can also use display:flex and flex-wrap for this
I have changed markup from ul li's to div and img's and i have let the last image for every row to grow and fit the container
check this snippet
.gallery-list-item {
display: flex;
width: 100%;
margin-top: 10px;
}
div img:not(:first-child) {
margin-left: 10px;
}
div.gallery-list-item img:last-child {
flex: 1;
}
div.gallery-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
width: 450px;
border: 1px solid black;
padding: 0;
}
<div class="gallery-list">
<div class="gallery-list-item">
<img src="http://shushi168.com/data/out/123/36699123-images.png" alt="..." height=100 width=100/>
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" alt="..." height=100 width=100/>
<img src="http://shushi168.com/data/out/123/36699123-images.png" alt="..." height=100 width=100/>
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" alt="..." height=100 width=100/>
</div>
<div class="gallery-list-item">
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" alt="..." height=100 width=100/>
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" alt="..." height=100 width=100/>
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" alt="..." height=100 width=100/>
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" alt="..." height=100 width=100/>
</div>
</div>
Hope it helps