Gaps Between Items Only

I need flex items with vertical gaps (10px) between items. Without gaps around. Solution with .container {margin: 0 -5px} is not good, it makes horizontal scrollbar for some reason

Solution 1:

To accomplish that, w/o using a script or media query, you will need a minor markup change.

With the extra wrapper you then compensate the left margin set on the items, so it will only be visible when wrapped.

Note, this trick is well known, since more or less all frameworks, like Bootstrap etc., use this to accomplish the same in their solutions. CSS Grid can do this much simpler, though due to lack of browser support, this is what's mostly used today.

Updated codepen

Stack snippet

body {
  margin: 0;
  background: black;
}

.container {
  max-width: 700px;
  margin: 20px auto;
  overflow: hidden;           /*  added  */
}

.wrapper {
  display: flex;
  /*flex-direction:row;           default, not needed  */flex-wrap: wrap;
  margin-left: -10px;         /*  compensate for item margin  */
}

.wrapperdiv {
  min-width: 300px;
  background: lightblue;
  border: 1px solid blue;
  flex-grow: 1;
  padding: 10px;
  margin-left: 10px;          /*  added left margin  */
}

<divclass="container"><divclass="wrapper"><div>one</div><div>two</div><div>three</div><div>four</div><div>five</div></div></div>

Solution 2:

Flexbox is not really the best solution when gutters are important. It doesn't provide a natural method for creating gaps between items, without applying those gaps between items and the container. You would need to add general CSS and/or JS to make it work.

However, gutters are not a problem in CSS Grid Layout, which provides specific properties for horizontal and vertical gaps:

• row-gap
• column-gap
• gap (the shorthand for both)

These properties create space between grid items, but not between items and the container.

10.1. Gutters: the row-gap, column-gap, and gap properties

The row-gap and column-gap properties (and their gap shorthand), when specified on a grid container, define the gutters between grid rows and grid columns.

NOTE that the CSS Grid spec was recently revised. These properties were previously listed as grid-column-gap, grid-row-gap and grid-gap (reference).

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  column-gap: 10px;
}

.wrapper > div {
  background: lightblue;
  border: 1px solid blue;
  padding: 10px;
}

body {
  margin: 0;
  background: black;
}

.container {
  max-width: 700px;
  margin: 20px auto;
}

<divclass="container"><divclass="wrapper"><div>one</div><div>two</div><div>three</div><div>four</div><div>five</div></div></div>

revised codepen

Solution 3:

There's probably a cleaner way to do it, but I guess this is sort of what you're looking for: https://codepen.io/anon/pen/gvbWyL

body {
  margin:0;
  background:black;
}

.columns__left {
  margin-bottom: 5px;
  margin-right: 5px;
}

.columns__right {
  margin-bottom: 5px;
  margin-left: 5px;
}

.container {
  max-width:700px;
  margin:20px auto;
  display:flex;
  flex-direction:row;
  flex-wrap: wrap;
}

div > div {
  min-width:300px;
  background:lightblue;
  border:1px solid blue;
  flex-grow: 1;
  padding:10px;
}

@mediaonly screen and (max-width: 653px){
.columns__left {
   margin: 0;
  }
.columns__right {
  margin: 0;
  }
}

<divclass="container"><divclass="columns__left">one</div><divclass="columns__right">two</div><divclass="columns__left">three</div><divclass="columns__right">four</div><div>five</div></div>