JSFiddle - React, Tailwind, and code Playground

by VKorneva

HTML

<div class="grid">
  <div class="grid_item"></div>
  <div class="grid_item"></div>
  <div class="grid_item"></div>
  <div class="grid_item"></div>
  <div class="grid_item"></div>
  <div class="grid_item"></div>
  <div class="grid_item"></div>
</div>

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
  grid-gap: 10px;
}

.grid_item {
  color: #fff;
}

.grid_item:nth-child(odd) {
  background: #52B3D9;
}

.grid_item:nth-child(even) {
  background: #66CC99;
}

JavaScript

var array = [1,2,3,4,5,6,7]; // массив
var colCount = 3; // количество колонок



// задача: заполнить по колонкам - первая, вторая, третья. верстка любая.

// результат:
// 1, 2, 3
// 4, 5, 6
// 7