如何在另一个网格旁边浮动网格

Question

我正在尝试在用户点击的网格旁边放置一个网格 每件事情都很好但是下一个网格没有自动浮动到空白空间如何实现。
这是我的HTML：

ItemsSourceCollection.FirstOrDefault()

我的CSS：

<ul class="gridWrapper">
  <li class="grid">

  </li>
  <li class="grid">

  </li>
  <li class="grid">

  </li>

  <li class="grid">

  </li>
</ul>

脚本在这里：

.gridWrapper {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.grid {
  display: inline-block;
  min-width: 300px;
  width: 45%;
  height: 50px;
  background: green;
  box-sizing: border-box;
  border: 5px solid #fff;
}
.grid-full{
  width: 100%;
  background: red;
}

My JSFiddle Link:

Answer 1

从CSS中删除width: 100%：

.grid-full{
  background: red;
}

小提琴：https://jsfiddle.net/haom8brd/

根据评论，是的，你可以。找到下一个偶数网格并将其放在下一个：

$('.grid').click(function() {
  $('.grid-full').remove();
  $(this).next(".grid:nth-child(even)").after('<li class="grid grid-full"></li>');
});

小提琴：https://jsfiddle.net/3sLhfL9e/