function App() {

Условие

function App() { const squares = Array.from({ length: 12 }); return ( ... ) }

// 12 красных квадратов 4 столбца на 3 строки размер 64 на 64 расстояние 4 рх

Ответ

Для двенадцати квадратов используйте CSS Grid с четырьмя колонками по 64 px и gap 4 px; автоматически получится три строки.

Пример React для статической декоративной сетки:

function App() {
  const squares = Array.from({ length: 12 });
  return <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 64px)', gap: 4 }}>
    {squares.map((_, index) => <div key={index}
      style={{ width: 64, height: 64, background: 'red' }} />)}
  </div>;
}

Для неизменяемых двенадцати позиций индекс подходит как key. Если квадраты должны быть интерактивными, используйте кнопки с доступными названиями.