Мне нужна помощь в создании веб-сайта на основе сетки

Question

Вот что мне нужно:

!

У меня возникли проблемы с преобразованием его в код.

Я думал о загрузке, но у меня есть элементы, которые пересекают столбцы и строки, и я просто не уверен, как его кодировать и хранить все в сетке 6x4, которую я создал для макета.

Другой проблемой в этом отношении является отзывчивость. Ящики в сетке должны складываться, когда окно просмотра становится короче. однако это также создает проблемы, когда элементы используют другое количество столбцов.

Любые идеи о том, как я должен подходить к этому?

Answer 1

Я предлагаю посмотреть, как работает bootstrap grid и как вы можете встраивать строки в строки.

Вот грубый макет того, как вы могли получение идеальной ваш дизайна с бутстрапом

.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 класс только, чтобы помочь установить некоторые стили на сетке, но это не обязательно.