我需要一些帮助创建一个基于网格的网站

Question

下面是我想要的布局：

好了！

​

我在将它转换成代码时遇到了一些问题。

我一直在考虑bootstrap，但我有跨列和跨行的元素，我只是不确定如何对其进行编码，并将所有内容保留在我为布局创建的6x4网格中。

在这方面的另一个问题是响应性。当视口变短时，栅格中的长方体应该堆叠。但是，当元素使用不同数量的列时，这也会产生问题。

我该如何处理这个问题有什么建议吗？

Answer 1

我建议阅读一下bootstrap grid是如何工作的，以及如何在行中嵌套行。

下面是如何使用bootstrap实现设计的粗略模型

​

.mygrid {
  text-align: center;
}
.mygrid div {
  border: 1px solid grey;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

<div class="container">
  <div class="mygrid">

    <!-- Top Half -->
    <div class="row">
      <div class="col-sm-2">
        <div class="row">1</div>
        <div class="row">2</div>
      </div>  
      <div class="col-sm-4">
        3<br/>
        3.5
      </div> 
      <div class="col-sm-2">
        <div class="row">4</div>
        <div class="row">5</div>
      </div>  
      <div class="col-sm-2">
        <div class="row">6</div>
        <div class="row">7</div>
      </div>  
      <div class="col-sm-2">
        <div class="row">8</div>
        <div class="row">9</div>
      </div>  
    </div>
    
    <!-- Bottom Half -->
    <div class="row">
      <div class="col-sm-6">
        <div class="row">
          <div class="col-sm-8">10</div>
          <div class="col-sm-4">11</div>
        </div>
        <div class="row">
          <div class="col-sm-4">12</div>
          <div class="col-sm-8">13</div>            
        </div>
      </div>  
      <div class="col-sm-4">
        14<br/>
        14.5
      </div> 
      <div class="col-sm-2">
        <div class="row">15</div>
        <div class="row">16</div>
      </div> 

    </div>

  </div>
</div>

​

我添加.mygrid类只是为了帮助在网格上设置一些样式，但这并不是必需的。