Trying to arrange images using css - css

Question

Here is the code I am using so far. I have 6 images that I am trying to arrange and make responsive as well.
Idea is like this
image -blank space - image
image -----blank space -----image
image -blank space - image
When I squeeze the page they do not end up stacked uniformly on top of each other. The spaces need to go away so all I have is 6 images on top of each other. CSS below followed by html
.row:after {
content: "";
clear: both;
display: table;
}
/** North Scottsdale */
.nsdl {
float: left;
margin: 0 175px;
padding: 0 0px;
width: 300px;
height: 200px;
border: 3px solid white;
background-image: url("/images/dphotos/test2a.png");
}
/** break1 */
.break1 {
float: left;
margin: 0px;
padding: 0px;
width: 95px;
height: 200px;
border: 3px solid white;
}
/** Scottsdale */
.sdl {
float: left;
margin: 0px;
padding: 10px;
width: 300px;
height: 200px;
border: 3px solid white;
background-image: url("/images/dphotos/test2a.png");
}
/** Tempe */
.tmpe {
float: left;
margin: 0 35px;
padding: 10 10px;
width: 300px;
height: 200px;
border: 3px solid white;
background-image: url("/images/dphotos/test2a.png");
}
/** break2 */
.break2 {
float: left;
margin: 10px;
padding: 10px;
width: 475px;
height: 200px;
border: 3px solid white;
}
/** Downtown */
.dtown {
float: left;
margin: 10px;
padding: 10px;
width: 300px;
height: 200px;
border: 3px solid white;
background-image: url("/images/dphotos/test2a.png");
}
/** West Side */
.wside {
float: left;
margin: 0 175px;
padding: 0 0px;
width: 300px;
height: 200px;
border: 3px solid white;
background-image: url("/images/dphotos/test2a.png");
}
/** break1 */
.break3 {
float: left;
margin: 0px;
padding: 0px;
width: 95px;
height: 200px;
border: 3px solid white;
}
/** UPTOWN */
.utown {
float: left;
margin: 0 120px;
padding: 10 10px;
width: 300px;
height: 200px;
border: 3px solid white;
background-image: url("/images/dphotos/test2a.png");
}
<div class="w3-container">
<div class="row">
<div class="left">
<div class="nsdl" style="text-align: center;">
<h2> NORTH SCOTTSDALE</h2>
</div>
</div>
<div class="center"> </div>
<div class="right">
<div class="sdl" style="text-align: center;">
<h2>SCOTTSDALE</h2>
</div>
</div>
</div>
<div class="row">
<div class="left">
<div class="tmpe" style="text-align: center;">
<h2>TEMPE</h2>
</div>
</div>
<div class="center"> </div>
<div class="right">
<div class="dtown" style="text-align: center;">
<h2>DOWNTOWN</h2>
</div>
</div>
<div class="left">
<div class="wside" style="text-align: center;">
<h2>WEST SIDE</h2>
</div>
</div>
<div class="center"> </div>
<div class="right">
<div class="utown" style="text-align: center;">
<h2>UPTOWN</h2>
</div>
</div>
</div>
</div>

Answer 1

I would suggest looking at a number of frameworks like Bootstrap, Skeleton and Zurb Foundation and use their CSS grid components. Look into how they control the size of various page regions with media queries using a mobile first approach.
You can definitely roll your own solution too. Here's an example.
<div class="img-group">
<div class="img-holder">
<img src="http://placehold.it/300x300?text=1">
</div>
<div class="img-holder">
<img src="http://placehold.it/300x300?text=2">
</div>
<div class="img-holder">
<img src="http://placehold.it/300x300?text=3">
</div>
<div class="img-holder">
<img src="http://placehold.it/300x300?text=4">
</div>
<div class="img-holder">
<img src="http://placehold.it/300x300?text=5">
</div>
<div class="img-holder">
<img src="http://placehold.it/300x300?text=6">
</div>
<div class="img-holder">
<img src="http://placehold.it/300x300?text=7">
</div>
<div class="img-holder">
<img src="http://placehold.it/300x300?text=8">
</div>
<div class="img-holder">
<img src="http://placehold.it/300x300?text=9">
</div>
</div>
.img-group img {
display: block;
max-width: 100%;
}
.img-holder {
float: left;
width: 50%;
}
#media ( min-width: 448px ) {
.img-holder {
width: 33.333%;
padding: 0.75%;
}
}
#media ( min-width: 779px ) {
.img-holder {
box-sizing: border-box;
width: 25%;
padding: 2%;
}
}
Demo JSFiddle.
First you make your images responsive. The simplest version of doing so is setting them to display: block; and max-width: 100%;. Setting the max width means they'll try to take up their parent element's width as long as they don't exceed their own intrinsic width. For example, if the parent element is 700px wide and the image is 600px wide, it won't stretch to fit the 700px of space. It will stop at 600px.
Now you place your images in container elements that you'll control with media queries. Use percentage widths (i.e. width: 25%; ) so they stay nice and fluid.
You might be wondering what box-sizing: border-box; does. It says that padding should be included as a part of your width definition. Normally if you have width: 25%; padding: 1%; the total width of your element would be 27% as 1% + 25% + 1% = 27%.