<div class="mc-block"></div>

<template>
  <div class="mc-item">
    <span class="mc__span"></span>
  </div>
</template>

body, html { margin: 0; padding: 0; }
.mc-block {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.mc-item {
  width: 60px;
  height: 60px;
  border: 1px solid #CCC;
  margin: 2px;
  text-align: center;
  line-height: 60px;
}
.red {
  background-color: #FFCDD2;
}
.green {
  background-color: #DCEDC8;
}

const block = document.querySelector('div.mc-block');

// создание 400 ячеек со случайными значениями
const frag = document.querySelector('template').content;
(new Array(400)).fill().forEach(() => {
  const el = frag.cloneNode(true);
  el.querySelector('span')
    .innerText = `${Math.random() > 0.5 ? '+' : '-'}${Math.floor(Math.random() * 100)}%`;
  block.appendChild(el);
});

// раскраска
block.querySelectorAll('.mc-item')
 .forEach(el => el.classList.add(el.textContent.trim().startsWith('+') ? 'green' : 'red'));