Динамически меняем ширину сетки на основе контейнера

Question

У меня есть сетка, состоящая из слотов размером 32x32. https://www.dropbox.com/s/8pdr8egzghd7wmy/Screenshot%202015-10-25%2023.12.23.png?dl=0

Основываясь на размере элемента, в котором он находится, как я могу добавить/удалить дополнительные сетки, чтобы заполнить его? (Не может когда-нибудь отрезать половину пути через слот сетки/плитка)

Вот мой код:

<style> 
    .drag-item { 
     position: absolute; 
     background-image: url('assets/images/objects/desk-1.png'); 
     background-size: 32px; 
     width: 32px; height: 32px; 
     cursor: move; 
    } 
    .drop-target { 
     position: absolute; 
     width: 480px; height: 480px; 
     border:dashed 1px orange; 
     background: whitesmoke url('assets/images/objects/grid_64.png') repeat; 
     background-size: 32px 32px; 

    } 
</style> 
<div class="panel-body" style="width: 520px; height: 520px;"> 
     <div class="drop-target"> 
       <div class="drag-item"></div> 
       <div class="drag-item"></div> 
       <div class="drag-item"></div> 
       <div class="drag-item"></div> 
       <div class="drag-item"></div> 
     </div> 
</div> 

Answer 1

Использование

.drag-item { 
    float: left; 
} 

вместо

.drag-item { 
    position: absolute; 
} 

Этот заставит элементы выравниваться рядом друг с другом и переходить в следующую строку, когда в текущей строке недостаточно места.

Для обеспечения того, чтобы контейнер всегда был квадратным, вам понадобится либо javascript, либо тонна медиа-запросов. Затем вы можете использовать overflow: hidden в контейнере, чтобы скрыть любые переполненные строки элементов или javascript, чтобы полностью удалить их из DOM.