避免带有浮动项目网格的空白空间

Question

我正在尝试制作一个网格来容纳 3 个不同大小的容器：多 row/4 列网格中的 1x1、1x2 和 2x2。我的目标是拥有一个网格，我可以在其中填充完美契合的新元素。问题是我在所有网格元素上使用 float: left 因此当我有一个不在第一列开始的 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 网格几个小时后我管理很好（非常好）。它非常灵活，尽管我仍在尝试弄清楚如何使其响应，但在较小的分辨率下，行之间会出现间隙。

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

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

html

css

flexbox

grid

css-grid