What is causing these huge gaps? - css

Question

I am trying to display several items from a query onto this page. I am trying to make them so that 6 images are on a line and evenly spaced. However, it seems that no matter how I change the css, I still keep ending up with huge gaps in some places.
Here is the code I used to create this section:
<div class="container2">
<div class="category"><h2>All Items</h2></div>
<div class="display">
<?php do { ?>
<ul>
<li><a href="details.php?recordID=<?php echo $row_Master['Master_ID']; ?>"><img class="thumb" src="img/<?php echo $row_Master['Img']; ?>"/>
<br />
<?php echo $row_Master['Name']; ?></a></li>
</ul>
<?php } while ($row_Master = mysqli_fetch_assoc($Master)); ?>
<!-- end .display --></div>
<?php
mysqli_free_result($Master);
?>
<!-- end .container2 --></div>
and the CSS associated with it:
.container2 {
margin:0 auto;
text-align: center;
width:95%;
background-color:#FFFFFF;
}
.display{
width:100%;
margin-left:auto;
margin-right:auto;
text-align:center;
overflow:hidden;
}
.display ul li {
float:left;
max-width:15.67%;
margin: 0 0 8% 1%;}
.display ul{
list-style:none;
}
img.thumb {
border:0;
max-height:150px;
min-width:16.67%;
vertical-align:middle;
padding:3px;}
Can anyone help me remove these huge gaps, plz?

Answer 1

Flexbox for the win.
You can get six across wrapping rows with this config. The flex container gets:
display: flex;
flex-wrap: wrap;
And the flex items get:
flex: 0 0 16.666%;
I added several comments in the CSS to explain what I did here. This approach takes a bit of practice but once you get it you will never use floats for layout again.
Here is a great resource that explains the flexbox approach really well: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
* { box-sizing: border-box; }
.display {
border: 2px solid red; /* just for demo visibility */
}
.display ul {
/* ul reset */
list-style: none;
padding: 0;
margin: 0;
/* flexbox layout - flex container config */
display: flex;
flex-wrap: wrap;
}
.display ul li {
border: 2px solid dodgerblue; /* just for demo visibility */
padding: 10px; /* use padding to create spacing between items, remove the borders to get the final look */
/* flex item config */
flex: 0 0 16.66%; /* 100 divided by 6 is 16.666... */
}
.display ul li span {
display: block;
text-align: center;
}
.display ul li img {
max-width: 100%;
height: auto;
}
<div class="container2">
<div class="category">
<h2>All Items</h2>
</div>
<div class="display">
<ul>
<li>
<a href="x">
<img class="thumb" src="https://picsum.photos/120" />
<span class="name">Thing 1</span>
</a>
</li>
<li>
<a href="x">
<img class="thumb" src="https://picsum.photos/120" />
<span class="name">Thing 2</span>
</a>
</li>
<li>
<a href="x">
<img class="thumb" src="https://picsum.photos/120" />
<span class="name">Thing 3</span>
</a>
</li>
<li>
<a href="x">
<img class="thumb" src="https://picsum.photos/120" />
<span class="name">Thing 4</span>
</a>
</li>
<li>
<a href="x">
<img class="thumb" src="https://picsum.photos/120" />
<span class="name">Thing 5</span>
</a>
</li>
<li>
<a href="x">
<img class="thumb" src="https://picsum.photos/120" />
<span class="name">Thing 6</span>
</a>
</li>
<li>
<a href="x">
<img class="thumb" src="https://picsum.photos/120" />
<span class="name">Thing 7</span>
</a>
</li>
<li>
<a href="x">
<img class="thumb" src="https://picsum.photos/120" />
<span class="name">Thing 8</span>
</a>
</li>
<li>
<a href="x">
<img class="thumb" src="https://picsum.photos/120" />
<span class="name">Thing 9</span>
</a>
</li>
<li>
<a href="x">
<img class="thumb" src="https://picsum.photos/120" />
<span class="name">Thing 10</span>
</a>
</li>
</ul>
</div>
</div>