generate css grid in javascript

<div class="grid-container"></div>
35 chars
2 lines

index.tsx
const container = document.querySelector('.grid-container');
const numberOfItems = 12; // number of grid items you want to create

for (let i = 0; i < numberOfItems; i++) {
    const gridItem = document.createElement('div');
    gridItem.classList.add('grid-item');
    container.appendChild(gridItem);
}
305 chars
9 lines

index.tsx
const gridColumns = 3;
const gridRows = Math.ceil(numberOfItems / gridColumns);
container.style.display = 'grid';
container.style.gridTemplateColumns = `repeat(${gridColumns}, 1fr)`;
container.style.gridTemplateRows = `repeat(${gridRows}, 1fr)`;
container.style.gridGap = '10px';

const gridItems = document.querySelectorAll('.grid-item');
gridItems.forEach(item => {
    item.style.width = '100%';
    item.style.height = '100%';
});
435 chars
13 lines