Ширина поля сетки не задана - элементы касаются друг друга в каждой строке

Question

Я впервые использую гридстек, и у меня возникают проблемы с горизонтальными полями. Очевидно, что в моем CSS есть что-то, что делает мои предметы слишком широкими.

Я вижу в демонстрациях, что gridstack.css имеет левую и правую стороны по 10 пикселей, и я использую ту же CSS по умолчанию.

Я настроил гридстек, чтобы использовать 6 столбцов следующим образом:

<div id="container" class="grid-stack grid-stack-6"> 
  <div class="grid-stack-item"
    data-gs-x="0" data-gs-y="0"
    data-gs-width="3" data-gs-height="2">
        <div class="grid-stack-item-content">
        <i class="icon-lock-open pinDiv warning"></i>
        <i class="icon-cancel-circled"></i>
        PRE MAP
  </div>
 <div class="grid-stack-item lockAspect"
    data-gs-x="3" data-gs-y="0"
    data-gs-width="3" data-gs-height="2">
        <div class="grid-stack-item-content" style="background:pink;">
        <i class="icon-lock pinDiv warning"></i>
        <i class="icon-cancel-circled"></i>
        POST MAP
        </div>
  </div>
</div>

Я использую следующие варианты:

DEFAULT_GRIDSTACK_OPTIONS =  {
    cellHeight: 150,
    verticalMargin: 10,
    width: 6
};

и я в том числе Gridstack-Extra, а также Gridstack.css.

Почему у моих предметов нет горизонтального поля вообще?

Спасибо большое

Answer 1

Вам нужно стилизовать класс

grid-stack-item-content

вместо

grid-stack-item

Answer 2

У меня была такая же проблема. Я исправил

.grid-stack > .grid-stack-item > .grid-stack-item-content{
   left: 3px;
   right: 3px;
}

Но не лучшие практики, я хочу, чтобы конфигурация в javascript аналогична опция конфигурации verticalMargin

var optionsLayoutDesign = {
            width: 6,
            float: true,
            removable: '.trash',
            verticalMargin:6,
            cellHeight:50,
            removeTimeout: 200,
            acceptWidgets: '.grid-stack-item',
            animate :true,
        };
$('#layout-design').gridstack(optionsLayoutDesign);