responsive grid of tiles evenly spaced - Is it possible with pure css ?

Question

Ive got a grid that has boxes in it, each box is the same size and has the same markup.

What im trying todo is have the boxes fill the full width of the page with an even gap between them. The idea is that if the browser window moves the box items will restack.

Ive looked into various ways of doing this including using the grid system from bootstrap 3, as well as from HERE

Ive also looked into using a JS plugin for this like Masonry, which although would work seems a bit overkill as all the tile sizes are the same.

At the moment ive got it almost working here : http://jsfiddle.net/3xshcn7p/

The only issue with this current approach is that if the browser window is <719px but >481 it will display only 2 of the boxs and leave a big blank space down the right hand side.

The same issue occurs between all of the boxes when the screen is not big enough for the next number of boxes per row up.

Any ideas if this is achievable purely using css or would it have to use js ?

Answer 1

Try adding text-align: center; to the body element then change float: left; to display: inline-block;.

E.g.

body {
    box-sizing: border-box;
    height:100%;
    background: #336633;
    text-align: center;
}

.box {
    width: 200px;
    height: 250px;
    background: white;
    display: inline-block;
    margin: 20px;
}

Here's the JsFiddle link.

Update: I also answered a similar question. Centre Multiple Responsive Divs Using CSS / JQUERY / HTML

Hope it helps.

Answer 2

You can use flexbox approach for the solution.

justify-content: space-around is used if the even space is needed around all the elements of the layout.

justify-content: space-between is needed for even space in between the elements of the layout.

body {
  box-sizing: border-box;
  height: 100%;
  background: #336633;
}
.wrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}
.box {
  width: 200px;
  height: 250px;
  background: white;
  float: left;
  margin: 20px;
}

<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<!--wrapper-->