避免使用浮动项目网格

Question

我正在尝试制作一个可容纳3个不同大小容器的网格：1x1,1x2和2x2多行/ 4列网格。我的目标是有一个网格，我可以在其中填充适合完美的新元素。问题是我正在使用float：当我有一个不在第一列中开始的2x2元素时，在所有网格元素上留下，在该2x2项之前会有空格。

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>

Answer 1

感谢@Michael_B对使用这两者的见解，我无法通过Flex实现无间隙网格，虽然经过几个小时的了解新的CSS网格后，我管理得很好（It＆＃39;太棒了）。它非常灵活，虽然我还在试图弄清楚如何使其响应，在较小的分辨率上，间隙会出现在行之间。

〜更新〜 通过将minmax()函数的最大值设置为grid-auto-rows规则到1fr单位（涵盖所有可用空间），我设法使网格在所有分辨率下都有响应。

＆＃13;

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;