I'm in the process of designing a portfolio layout. For large screens, I envision three columns with evenly spaced out images. To better illustrate my idea, you can view an example here:
http://www.example.com/portfolio
I've put together a basic jsfiddle showcasing my concept: http://jsfiddle.net/3h2fm6pb/1/
Below is the HTML structure:
<div id="container">
<div class="imgContainer">
<div class="image">
<img src="http://www.example.com/image1.jpg">
</div>
<div class="image">
<img src="http://www.example.com/image2.jpg">
</div>
<div class="image">
<img src="http://www.example.com/image3.jpg">
</div>
<div class="image">
<img src="http://www.example.com/image4.jpg">
</div>
<div class="image">
<img src="http://www.example.com/image5.jpg">
</div>
<div class="image">
<img src="http://www.example.com/image6.jpg">
</div>
</div>
</div>
And here's the SCSS code to style it:
#container {
max-width: 600px;
margin: 0 auto;
.imgContainer{
width: 100%;
}
}
.image {
float: left;
width: 33%;
img {
width: 100%;
display: block;
}
}
I'm encountering some trouble achieving consistent white space between the images. Adding padding: 5px; to the .image class leads to only two images fitting per row. Why might this be happening?
I know that the current jsfiddle scales down the entire container when resizing the viewport, but I plan on implementing media queries to adjust the image sizes accordingly for different screen sizes.
Given these factors, what would be the most effective approach to ensure the images have uniform padding between them regardless of viewport size? My previous attempts haven't yielded satisfactory results as the spacing appears uneven upon rearrangement for different viewports.
Here's an outline of how I envision the layout responding to various viewport sizes:
For large screens: Three images are displayed per row with equal gaps between each image and row.
For smaller screens: Two images per row with consistent spacing between them and rows.
For mobile screens: One image per row with uniform padding above and below each image.
I hope this explanation clarifies things. Thank you for your assistance.