All this seems like too much code.
I simplified it with Flexbox (as shown below).
Here is what I did:
For .center, I added a class called the "center" to the div that contains the mesh container. It mainly centers your section.
For a section A section is a container of all grid elements. I added display, flexibility, flexibility and width. You do not need to declare all of them (except for display), as some of them are default values that are delivered using display: flex. I recommend that you test all of this on the console.
For an article you need to declare the width and margin here. I declare 4 columns. The following is an example calculation using two columns:
Since my margin is 1.66%, my total area is 6.64%. How did I come up with this number? The first mesh element has an edge to the right and left. The second grid element has an edge to the right and left. So 1.66% X 4
Then I subtract 6.64 from 100, which gives me 93.36. I divide it into two parts because I have two columns. Thus, each column width will be 46.68%. * /
If you need to add padding, you will need to declare the following:
article { box-sizing:border-box; }
This will crash your columns.
CSS Tricks has a great tutorial on using flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.center { display: flex; flex-direction: column; align-items: center; } section { display:flex; flex-direction:row; flex-wrap:wrap; width:80%; } article { background: grey; width:21.68%; margin: 1.66%; } img { max-width:100%; }
<div class="center"> <section> <article> <img src="http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg" alt="image"> <div class="thumb"> <h3 class="thumb-title">Box One</h3> <p class="thumb-description">Item preview</p> </div> </article> <article> <img src="http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg" alt="image"> <div class="thumb"> <h3 class="thumb-title">Box One</h3> <p class="thumb-description">Item preview with some content that makes it extend onto another line.</p> </div> </article> <article> <img src="http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg" alt="image"> <div class="thumb"> <h3 class="thumb-title">Box One</h3> <p class="thumb-description">Item preview</p> </div> </article> <article> <img src="http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg" alt="image"> <div class="thumb"> <h3 class="thumb-title">Box One</h3> <p class="thumb-description">Item preview</p> </div> </article> <article> <img src="http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg" alt="image"> <div class="thumb"> <h3 class="thumb-title">Box One</h3> <p class="thumb-description">Item preview</p> </div> </article> <article> <img src="http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg" alt="image"> <div class="thumb"> <h3 class="thumb-title">Box One</h3> <p class="thumb-description">Item preview</p> </div> </article> </section> </div>