I'm trying to create a 16x16 grid with flexbox. I have set the width property of every 17th element to 100% and flex-wrap to wrap to achieve this. However, for some reason, my code doesn't work. I don't get the 16x16 grid on my page. How can I solve this?
const cdiv = document.querySelector('.container');// Add 16 divsfor (let i = 1; i < 257; i++) { const div = document.createElement('div'); div.style.cssText = "border: 1px solid black; height: 25px; width: 25px"; cdiv.appendChild(div);}* { box-sizing: border-box;}.container { display: flex; flex-wrap: wrap;}.container>div:nth-child((16n + 1)) { width: 100% !important;}<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Etch-a-Sketch</title><link rel="stylesheet" href="style.css"></head><body><div class="container"></div><script src="script.js"></script></body></html>