动态网格布局填充最后一行

Question

我想建立一个动态填充的网格。 网格有2列，但是如果块数为奇数，我希望最后一行填充两列。 由于块是动态添加的，因此我不能在最后一个元素上放置类，也不知道会有多少块。

预期：

我使用网格布局，但是我想念一些东西：

.container {    
display: grid;
grid-template-columns: repeat(2, 1fr);
justify-content: flex-start;
align-items: center;
}

Answer 1

您应该按照@RayeesAC在其评论中的建议使用 flexbox 。但是，如果您仍然想使用 Grid ，则可以使用 javascript -

growOrShrink();


function growOrShrink() {
  const container = document.querySelector('.container');
  const items = container.children
  const itemsNum = items.length;


  // if it's odd number of items
  if(itemsNum % 2) {
    items[itemsNum - 1]
      .classList.add('grow');
  }

  else {
    items[itemsNum - 1]
      .classList.remove('grow');

    items[itemsNum - 2]
      .classList.remove('grow');
  }
}

.container {  
  width: 100vw;
  height: 100px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: flex-start;
  align-items: center;
}

.item {
  background: gray;
  border: 1px solid black;
}

.item.grow {
  grid-column: 1/3;
}

<div class='container'>
  <div class='item'>item1</div>
  <div class='item'>item2</div>
  <div class='item'>item3</div>
</div>