2X2 grid features

index.js

@@ -4,12 +4,12 @@ let main = document.createElement('div');
 main.className = 'divContainer';
 document.body.appendChild(main);
 
-for(let i=0;i<2;i++) {
+for(let i=0;i<20;i++) {
     const rowDiv=document.createElement('div');
-    rowDiv.className = 'rowDivContainer'+i
+    rowDiv.className = 'rowDivContainer';
     main.appendChild(rowDiv);
 
-    for(let j=0;j<2;j++) {
+    for(let j=0;j<20;j++) {
         const div=document.createElement('div');
         //div.innerHTML = 'red';
         div.className='divElem';

style.css

@@ -2,28 +2,23 @@
     display: flex;
     flex-direction: column;
 }
-.rowDivContainer0{
+.rowDivContainer{
     display: flex;
     border: 1px solid green;
-    width: 50px;
 
-    justify-content: space-around;
+    width:  500px;
-}
+
-.rowDivContainer1{
-    display: flex;
-    border: 1px solid green;
-    width: 50px;
     justify-content: space-around;
 }
 
 .divElem{
     height: 30px;
     width: 30px;
-
+    border: 1px solid green;
-    /*border: solid green;*/
 }
 .colorChange{
     background-color: red;
+    border: 1px solid green;
     height: 30px;
     width: 30px;
 }