具有水平和垂直元素的响应式网格

Question

这是我正在尝试做的一个示例：https://i.imgur.com/Jhj3Xn2.png

我实际上不确定这是否可行，我怀疑它可能不可行，或者可能需要 Javascript 库来完成此操作。

我要做的是构建一个响应式画廊，其中包含垂直和水平元素，它们自己组合在一起。我发现，虽然您可以让元素在特定的屏幕尺寸下看起来不错，但一旦您改变视口宽度，您最终会在布局中出现“洞”。

任何人都可以想出一种方法来让内容在页面上流动，使其既具有响应性又不会在内容中留下空白？我正在使用 Bootstrap 4，我很乐意使用任何可能需要的 JS 或 CSS 来完成此操作。

Answer 1

这是与您的结构相似的结构，它有点混乱，因为必须使用类，是的，它是 Bootstrap 类（col-12 col-xs-12 用于

您可以添加所需的尺寸并相应地对其进行结构化。

如果您有不明白的地方，请告诉我。

.outer {
  width: 500px;
  height: 500px;
  margin: auto;
  margin-top: 20px;
}

.top {
  height: 250px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container outer">
  <div class="row top">
    <div class="col-3" style="border:1px solid black;">
      <div class="row">
        <div class="col-12" style="border:1px solid black; height:125px;">
        </div>
        <div class="col-12" style="border:1px solid black; height:125px;">
        </div>
      </div>
    </div>


    <div class="col-6" style="border:1px solid black;">
      <div class="row">
        <div class="col-6" style="border:1px solid black; height:125px;">
        </div>
        <div class="col-6" style="border:1px solid black; height:125px;">
        </div>
      </div>

      <div class="row">
        <div class="col-12" style="border:1px solid black; height:125px;">
        </div>
      </div>
    </div>


    <div class="col-3" style="border:1px solid black;">
      <div class="row">
        <div class="col-12" style="border:1px solid black; height:250px;">
        </div>
      </div>
    </div>
  </div>
  <div class="row top">

    <div class="col-3" style="border:1px solid black;">
      <div class="row">
        <div class="col-12" style="border:1px solid black; height:250px;">
        </div>
      </div>
    </div>


    <div class="col-3" style="border:1px solid black;">
      <div class="row">
        <div class="col-12" style="border:1px solid black; height:125px;">
        </div>
        <div class="col-12" style="border:1px solid black; height:125px;">
        </div>
      </div>
    </div>


    <div class="col-3" style="border:1px solid black;">
      <div class="row">
        <div class="col-12" style="border:1px solid black; height:125px;">
        </div>
        <div class="col-12" style="border:1px solid black; height:125px;">
        </div>
      </div>
    </div>

    <div class="col-3" style="border:1px solid black;">
      <div class="row">
        <div class="col-12" style="border:1px solid black; height:125px;">
        </div>
        <div class="col-12" style="border:1px solid black; height:125px;">
        </div>
      </div>
    </div>



  </div>
</div>