How do you align dynamically generated divs to right and left side of the parent without losing the margin between them? - css

Question

Lets say I have a website where, on every page, there is a large picture of a kitten. This picture is exactly the same on every page. Below it are smaller divs, containing pictures of related kittens, which are dynamically generated... the number also varies, on some pages there may be five, on others there could be 30. I've drawn a crude picture of the layout here:
Here's what I'm looking to do... I need to:
Make sure the smaller pictures both align left and align right with the larger picture above it.
Give the divs a small percentage of space between each other.
Allow the divs to stack when the screen gets smaller.
When aligning smaller divs in a row with a larger one above it, my usual approach is to do something like this:
.little_divs {
margin-left:2%;
}
.little_divs:first-child {
margin-left: 0px;
}
That would easily allow me to have both the left and right sides match up with the div above it. My problem is that this technique will not work for the next rows, if there are more than three.
My next idea was to contain each group of three in their own div, and apply the first child rule there... however, that brings up a problem of when it collapses down to the smaller screen sizes. If I group them in three and apply the rule, once they are two across, it will no longer work.
I could make a complicated solution involving JavaScript, but I was hoping for a pure CSS/HTML solution.
Let me know if you have any questions on this.

Answer 1

You can change .little_divs:first-child to ...
.little_divs:nth-child(3n+1) {
margin-left: 0px;
}
... or ...
.little_divs:nth-of-type(3n+1) {
margin-left: 0px;
}
... to select the first item on each row where there are 3 items on each row. Adjust the count for the amount of columns e.g. 4n+1 for 4 columns, etc.
This takes every 3rd natural number and offsets it by 1 (next item) which matches 1, 4, 7, etc.
Edit:
If you want this to work with a different amount of columns, you'll need to add the selectors inside mediaqueries as follows:
#media only screen and (min-width:1025px){
.little_divs:nth-child(3n+1) {
margin-left: 0px;
}
}
#media only screen and (max-width:1024px){
.little_divs:nth-child(2n+1) {
margin-left: 0px;
}
}
... or similar for each break point.

Answer 2

My preferred method is to add a container to the small ones, and make the width of that the width of the container plus the width of one of your margins, and give it a negative margin.
.container {
margin: 0 auto;
width: 300px;
}
.main {
background: #0f0;
height: 100px;
width: 300px;
}
.small-container {
margin-left: -15px;
width: 315px;
}
.small {
background: #f0f;
float: left;
height: 100px;
margin-left: 15px;
margin-top: 15px;
width: 90px;
}
<div class="container">
<div class="main"></div>
<div class="small-container">
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
</div>
</div>
With this, it lines up and you don't have to mess with first-child at all or anything.