将html <detail>标记列表显示为稳定的网格

Question

我有一个html详细信息标签列表，我希望以网格形式显示。我遇到的问题是，如果我扩展其中一些标签，它会重新定位其他一些标签。

这是我的代码：

function setBody(){  
  var selDiv = document.createElement('div');
  var form = document.getElementById("inputform");

  createCheckboxes(selDiv);
  document.getElementById("inputform").style.margin = "40px";
  selDiv.style.height = "500px";
  selDiv.style.width = "100%";
  selDiv.style.marginTop = "10px";
  selDiv.style.left = "50px";
  selDiv.style.position = "relative";
  selDiv.style.left = "0px";
  selDiv.style.display = "grid";
  form.insertBefore(selDiv,form.childNodes[0]);
}

function createCheckboxes(selDiv)
{
  var ulExp = document.createElement("ul");
  ulExp.style.width = "100%";
  for (var key in contacts)
  {
    var expDiv = document.createElement("div");
    expDiv.style.display = "grid";
    expDiv.style.float = "left";

    var liExp = document.createElement("li");
    liExp.style.width = "270px";
    liExp.style.float = "left";
    liExp.style.display = "inline";

    var sum = document.createElement('summary');
    sum.innerHTML = key;

    var expBlk = document.createElement('details');
    expBlk.appendChild(sum);
    expBlk.style.float = "left";
    expBlk.style.margin = "5px";
    expBlk.style.paddingLeft = "10px";
    expBlk.style.width = "250px";

    if (contacts.hasOwnProperty(key))
    {
      var ulChk = document.createElement("ul");
      ulChk.style.float = "left";
      ulChk.style.display = "inline-block";

      var persons = contacts[key];
      
      for (var i=0; i < persons.length; i++)
      {
        var br = document.createElement("br");  
        var description = document.createTextNode(persons[i]    ["givenName"]+" "+persons[i]["sn"]);

        var label = document.createElement("label");
        label.style.padding = "1px";

        var checkbox = document.createElement("input");
        checkbox.type = "checkbox";
        checkbox.name = persons[i]["uids"];
        checkbox.value = persons[i]["sn"];

        label.appendChild(checkbox);
        label.appendChild(description);
        ulChk.appendChild(label);
        ulChk.appendChild(br);
        expBlk.appendChild(ulChk);
        liExp.appendChild(expBlk);
        expDiv.appendChild(liExp);
      }
      selDiv.appendChild(expDiv);
    }
  }
}

未扩展版本：      一个扩展版本：      另一个扩展版本：     

我不希望这些差距出现。我宁愿只让打开的块下面的块垂直向下移动。有没有办法使用Javascript来做到这一点？这是我的第一个JS代码，我从未完成过JQuery或几乎任何其他Web语言，所以理想情况下我更喜欢JS解决方案，如果有的话。感谢。