如何创建图片中所示的自适应网格设计？

Question

这是我的一些CSS代码，可用于在网格视图内创建阴影框。我试图找到诸如rowpan和colspan之类的HTML，但我一无所知。

     .box{
          width: 100%;
          height: 240px;
          background: white;
          border-color: black;
          border-width: 2px;

          -webkit-box-shadow: -1px 2px 5px 1px rgba(10,0,10,1);
          -moz-box-shadow: -1px 2px 5px 1px rgba(10,0,10,1);
          box-shadow: -1px 2px 5px 1px rgba(10,0,10,1);
      };

Answer 1

您可以使用Bootstrap Grid system创建列。您可以尝试以下结构。

<div class="container">
  <div class="row">
    <div class="col-sm-8">
      <div class="box h-100">Box 1</div>
    </div>
    <div class="col-sm-4">
      <div class="box mb-3">Box 2</div>
      <div class="box mb-3">Box 3</div>
      <div class="box mb-3">Box 4</div>
      <div class="box">Box 5</div>
    </div>
  </div>
  <div class="row my-3">
    <div class="col-sm-4">
      <div class="box">Box 6</div>
    </div>
    <div class="col-sm-4">
      <div class="box">Box 7</div>
    </div>
    <div class="col-sm-4">
      <div class="box">Box 8</div>
    </div>
  </div>
  <div class="row my-3">
    <div class="col-sm-4">
      <div class="box">Box 9</div>
    </div>
    <div class="col-sm-4">
      <div class="box">Box 10</div>
    </div>
    <div class="col-sm-4">
      <div class="box">Box 11</div>
    </div>
  </div>
</div>