Responsive 3-column grid layout leaves open spaces

问题

I am building a responsive portfolio website with a grid of thumbnails. It goes from a one-column grid up to a three-column grid depending on the browser width.

The problem occurs only in the three-column grid. When I resize the browser, sometimes the grid just skips two thumbnails and leaves an empty space. The thumbnails are pushed further in the grid like this:

Now, this only happens sometimes. When I'm resizing the browser I can see it switching from the normal grid to the error grid and back (at least in Chrome and Safari, Firefox always displays the error when resizing).

Here is my html/css for the thumbnail divs.

HTML

<div class="thumbnails">
    <div>*image*</div>
    <div>*image*</div>
    <div>*image*</div>
<div>

CSS

.thumbnails div{
    width: 33.33333%;
}

All of my elements have box-sizing: border-box; on them. I hope I didn't leave out any other relevant info. I haven't encountered this particular problem before. Maybe I'm overlooking something obvious, but any help would be appreciated!

回答1:

For as far as i know this could fix it

.thumbnails div:nth-child(3n + 4){
   clear: left;
}

If one of the div's in a row does not have the same height as the others you need clear: left; on the first one of the next row.

来源：https://stackoverflow.com/questions/32058493/responsive-3-column-grid-layout-leaves-open-spaces