divide div in four parts in javascript

To divide a div element into four equal parts using JavaScript and CSS, you can utilize the grid display property. Here's the code to achieve this:

HTML:

<div class="container"></div>
30 chars
2 lines

CSS:

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* divide into 2 columns */
  grid-template-rows: repeat(2, 1fr); /* divide into 2 rows */
  grid-gap: 10px; /* set gap between grid cells */
}
215 chars
7 lines

JavaScript:

index.tsx
const container = document.querySelector('.container');
for (let i = 0; i < 4; i++) {
  const div = document.createElement('div');
  div.classList.add('cell');
  container.appendChild(div);
}
192 chars
7 lines

The JavaScript code creates 4 child div elements inside the parent div with class name container. The CSS grid property is used to divide the parent div into four equal parts by defining the number of rows and columns. You can adjust the value of grid-template-columns and grid-template-rows to divide the div into more than four parts.