grid布局问题？

Question

我想要实现一个固定四列，元素个数不定，元素从上往下，再从左往右排列的grid布局，请问代码要怎么编写？

Answer 1

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <!-- 更多grid-item... -->
</div>

.grid-container {
  column-count: 4;
  column-gap: 10px;
}

.grid-item {
  background-color: #ddd;
  padding: 20px;
  text-align: center;
  break-inside: avoid;
  margin-bottom: 10px;
}