Avoiding empty spaces with floated items grid

Question

I'm trying to make a grid that will house 3 different sized containers: 1x1, 1x2 and 2x2 in a multi row/4 column grid. My goal is to have a grid in which I can populate with new elements that will fit in perfectly. The problem is that I'm using float: left on all grid elements therefor when I have a 2x2 element that does not begin in the first column, there will be empty spaces before that 2x2 item.

section {
  width: 50%;
}

.item {
  float: left;
}

img {
  width: 100%;
  vertical-align: middle;
}

.one {
  width: 25%;
}

.two {
  width: 50%;
}

.four {
  width: 50%;
  height: 50%;
}

<section>
    <div class="item one">
      <img src="http://via.placeholder.com/400x400/">
    </div>
    <div class="item one">
      <img src="http://via.placeholder.com/400x400/sss">
    </div>
    <div class="item two">
      <img src="http://via.placeholder.com/400x200/000080">
    </div>
    <div class="item one">
      <img src="http://via.placeholder.com/400x400/000080">
    </div>
    <div class="item one">
      <img src="http://via.placeholder.com/400x400/">  
    </div>
    <div class="item four">
      <img src="http://via.placeholder.com/400x400/ff69b4">
    </div>
    <div class="item one">
      <img src="http://via.placeholder.com/400x400/">
    </div>
    <div class="item one">
      <img src="http://via.placeholder.com/400x400/sss">
    </div>
    <div class="item one">
      <img src="http://via.placeholder.com/400x400/">
    </div>
    <div class="item one">
      <img src="http://via.placeholder.com/400x400/sss">
    </div>
    <div class="item one">
      <img src="http://via.placeholder.com/400x400/000080">
    </div>
    <div class="item one">
      <img src="http://via.placeholder.com/400x400">
    </div>
    <div class="item one">
      <img src="http://via.placeholder.com/400x400/000080">
    </div>
    <div class="item one">
      <img src="http://via.placeholder.com/400x400">
    </div>
</section>

Absolutely, anything to make it work while allowing items to be dropped in at the end — Dotol, Jan 25 '18 at 22:51

Dotol · Accepted Answer · 2018-01-26T16:19:26.223

Thanks @Michael_B for the insight on using those two, I couldn't achieve a gapless grid with Flex, although after a few hours of getting to know the new CSS Grid I managed it just fine (It's incredibly good). It's very flexible although I'm still trying to figure out how to make it responsive, on smaller resolutions gaps will appear in between rows.

~ Update ~ By setting the maximum value of the minmax() function to the grid-auto-rows rule to 1fr unit (covers all free space) I managed to make the grid responsive at all resolutions.

/* Assign an element a variable to be used by the 'grid-template-areas' rule */
.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
.d { grid-area: d; }
.e { grid-area: e; }
.f { grid-area: f; }
.g { grid-area: g; }
.h { grid-area: h; }
.i { grid-area: i; }
.j { grid-area: j; }
.k { grid-area: k; }
.l { grid-area: l; }
.m { grid-area: m; }

* { box-sizing: border-box; }

.container {
  box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.5);
  margin: 0 auto;
  max-width: 800px;
  /* Grid properties */
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: minmax(80px, 1fr);
  /* Make a custom grid */
  grid-template-areas: 
    "a a b b c c c c"
    "d d d d c c c c"
    "e e f f f f g g"
    "h h h h i i i i"
    "j j k k l l l l";
}

img {
  vertical-align: middle;
  width: 100%;
}
    
div {
  background-color: #ccc;
  color: #d9480f;
}

<div class="container">
  <div class="a">
    <img src="http://via.placeholder.com/400x400/sss">
  </div>
  <div class="b">
    <img src="http://via.placeholder.com/400x400/000080">
  </div> 
  <div class="c">
    <img src="http://via.placeholder.com/400x400/fff">
  </div>
  <div class="d">
    <img src="http://via.placeholder.com/400x200/ccc">
  </div>
  <div class="e">
    <img src="http://via.placeholder.com/400x400/ccc">
  </div>
  <div class="f">
    <img src="http://via.placeholder.com/400x200/000080">
  </div>
  <div class="g">
    <img src="http://via.placeholder.com/400x400/sss">
  </div>
  <div class="h">
    <img src="http://via.placeholder.com/400x200/ccc">
  </div>
  <div class="i">
    <img src="http://via.placeholder.com/400x200/sss">
  </div>
  <div class="j">
    <img src="http://via.placeholder.com/400x400/sss">
  </div>
  <div class="k">
    <img src="http://via.placeholder.com/400x400/ccc">
  </div>
  <div class="l">
    <img src="http://via.placeholder.com/400x200/fff">
  </div>
</div>

Avoiding empty spaces with floated items grid

1 Answers1