Wrapping divs with gaps between them

Question

I have divs that i want to wrap to the next line when the browser window gets smaller. I also want margin to be put in between the divs so that there's a gap between them. The problem I'm having is that the margin on the centre divs causes the divs to wrap incorrectly if the browser is set to a specific size. At a certain size you have 2 divs underneath one div. See my screenshot below as an example and this fiddle: http://jsfiddle.net/uhh2jwe2/ (change the width of the window)

This really needs to be dynamic as it will be a framework solution for laying out differently sized divs. The parent div will be fluid similar to the example. Any help would be great

#outer {
  width: 90%;
  height: 90%;
  margin: 5%;
  overflow: auto;
  background-color: red;
}

.inner1 {
  float: left;
  width: 150px;
  height: 150px;
  margin-right: 20px;
  background-color: blue;
}

.inner2 {
  float: left;
  width: 150px;
  height: 150px;
  margin-right: 20px;
  background-color: blue;
}

.inner3 {
  float: left;
  width: 150px;
  height: 150px;
  background-color: blue;
}

<div id="outer">
  <div class="inner1">1</div>
  <div class="inner2">2</div>
  <div class="inner3">3</div>
</div>

Answer 1

You can use media queries to alter the css on smaller screen.

#outer {
  width: 90%;
  height: 90%;
  margin: 5%;
  overflow: auto;
  background-color: red;
}

.inner1 {
  float: left;
  width: 150px;
  height: 150px;
  margin-right: 20px;
  background-color: blue;
}

.inner2 {
  float: left;
  width: 150px;
  height: 150px;
  margin-right: 20px;
  background-color: blue;
}

.inner3 {
  float: left;
  width: 150px;
  height: 150px;
  background-color: blue;
}

@media (max-width: 435px) {
  #outer > div {
      margin-right:auto;
      margin-left:auto;
      margin-bottom:15px;
      float:none;
  }
}

<div id="outer">
  <div class="inner1">1</div>
  <div class="inner2">2</div>
  <div class="inner3">3</div>
</div>

Answer 2

Use Media query like this:

#outer div:last-child {
    margin-bottom: 0;
}

@media screen and (max-width:570px) {
    .inner1, .inner2, .inner3 {
        margin-bottom: 5px;
    }
}

@media screen and (max-width:411px) {
    .inner1, .inner2, .inner3 {
        float: none;
        margin: auto;
        margin-bottom: 5px;
    }
}

#outer {
    width: 90%;
    height: 90%;
    margin: 5%;
    overflow: auto;
    background-color: red;
}

.inner1 {
    float: left;
    width: 150px;
    height: 150px;
    margin-right: 20px;
    background-color: blue;
}
.inner2 {
    float: left;
    width: 150px;
    height: 150px;
    margin-right: 20px;
    background-color: blue;
}
.inner3 {
    float: left;
    width: 150px;
    height: 150px;
    background-color: blue;
}

#outer div:last-child {
    margin-bottom: 0;
}

@media screen and (max-width:570px) {
    .inner1, .inner2, .inner3 {
        margin-bottom: 5px;
    }
}

@media screen and (max-width:411px) {
    .inner1, .inner2, .inner3 {
        float: none;
        margin: auto;
        margin-bottom: 5px;
    }
}

<div id="outer">
    <div class="inner1">1</div>
    <div class="inner2">2</div>
    <div class="inner3">3</div>
</div>

Answer 3

I would recommend a solution that extracts the grid-elements from the content-elements. Therefore you have a lot more control about your layout and you can be more flexible with content you want to place into it.

• Use your .inner elements as grid-elements and wrap content inside them into .inner-content
• Wrap all inners into a row to get rid of the outer-gutter
• Give the .inner elements a percentage-width and a px-max-width. So the elments can take alwyay 33.33% of the avaiable width but never more then 150px.
• I added some adjustments for small screens, so the .inner elements wrap below each other and take more then 33.33% of the .outer container width.
• Inspect the code: http://jsfiddle.net/uhh2jwe2/5/

* {
  box-sizing: border-box;
}

/* flexible outer container */
.outer {
  width: 90%;
  height: 90%;
  margin: 5%;
  overflow: hidden;
  background-color: red;
}

/* remove outer gutter */
.row {
  margin: 0 -10px;
}

/* .inner will take care of the width */
.inner {
  width: 33.33%;
  max-width: 150px;
  float: left;
  padding: 0 10px;
}

/* .inner-content take care of the height */
.inner-content {
  height: 150px;
  color: #fff;
  background: blue;
}

@media (max-width: 435px) {
  /* this wraps .inner elements below each other and extends width */
  .outer .inner {
      padding: 10px 0;
      width: 100%;
      max-width: 100%;
      float:none;
  }  
}

<div class="outer">
  <div class="row">
    <div class="inner">
      <div class="inner-content">1</div>
    </div>
    <div class="inner">
      <div class="inner-content">2</div>
    </div>
    <div class="inner">
      <div class="inner-content">3</div>
    </div>
  </div>
</div>

Answer 4

I would suggest to use bootstrap's technique for that. Have padding on both sides of your inner elements, and negate it with negative margin on the container.

This will require more markup tough. While .row and .container could be merge on the same element, the background-color would overflow to the left because of the negative margin.

.container {
  background-color: green;
  width: 510px;
}

.row {
  font-size: 0;
  margin: 0 -15px;
}

.block {
  font-size: 12px;
  padding: 0 15px;
  display: inline-block;
}

.content {
  width: 150px;
  height: 150px;
  background-color: red;
}

<div class="container">
  <div class="row">
    <div class="block">
      <div class="content">

      </div>
    </div>
    <div class="block">
      <div class="content">

      </div>
    </div>
    <div class="block">
      <div class="content">

      </div>
    </div>
    <div class="block">
      <div class="content">

      </div>
    </div>
    <div class="block">
      <div class="content">

      </div>
    </div>
  </div>
</div>