Aquí hay una solución CSS pura usando display: grid; y la pseudoclase CSS :has() . Usando :has() podemos aplicar estilos a un elemento basado en el conteo de sus hijos:

 #container:has(div:nth-child(3)) {
 grid-template-columns: 1fr 1fr;
 grid-template-rows: 1fr 1fr;
}

El estilo anterior se aplicará al elemento con id="container" solo cuando contenga al menos 3 elementos secundarios.

JS violín

(JavaScript solo se usa para agregar divs al contenedor para demostración)

Fuentes:

Artículo que explica cómo aplicar estilo a los elementos en función del recuento de niños: https://www.matuzo.at/blog/2022/counting-children/

:has() Pseudoclase CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/:has

HTML: creación de Input para el valor K con Buttons de envío y reinicio, creación de un contenedor div .wrapper .

CSS: dando a mi contenedor un tamaño de 400x400. declarando una :root --width:50%; que se utiliza para establecer el ancho de un solo cuadro que se generará a través de JS .

JS: agregando EventListener en el botón de submit . Lo primero que estoy haciendo es obtener el valor de entrada (K). Poner una condición if para verificar si el usuario ya ha generado algún divs , si lo ha hecho, elimino todo lo que está dentro del envoltorio con innerHTML = ""

colocando otro if para verificar si el número es mayor que 4 y luego haciendo que el tamaño de cada cuadro sea del 33% para cumplir con nuestro requisito de 3x3 cambiando el valor de la variable en :root a --width:33%`.

haciendo un bucle dentro for loop para crear nuestro cuadro. Los cuadros generarán (k)Times . Con html dentro createBox y agregándolo dentro del wrapper . Espero que haya entendido. Si tiene alguna pregunta, por favor pregunte.

 let wrapper = document.querySelector(".wrapper");
let btn = document.querySelector(".btn");
let resetBtn = document.querySelector(".r-btn");

btn.addEventListener("click", () => {
 let input = document.querySelector("#input").value;
 if (wrapper.innerHTML !== "") {
 wrapper.innerHTML = "";
 }
 if (input > 4) {
 document.querySelector(":root").style.setProperty("--width", "33.3%");
 } else {
 document.querySelector(":root").style.setProperty("--width", "50%");
 }
 for (let i = 0; i < input; i++) {
 let createBox = `<div class="box">${i + 1}</div>`;
 wrapper.innerHTML += createBox;
 }

 document.querySelector("#input").value = "";
});
resetBtn.addEventListener("click", () => {
 wrapper.innerHTML = "";
});

 :root{
 --width:50%;
}
#input {
 width: 100px;
 margin-bottom: 10px;
}
.box {
 background-color: burlywood;
 text-align: center;
 width: var(--width);
 outline: 1px solid green;
}
.wrapper {
 display: flex;
 flex-wrap: wrap;
 width: 400px;
 height: 400px;
 outline: 1px solid red;
}

 <input min="2" max="9" type="number" placeholder="Enter K Value" id="input" />
<button class="btn">Enter</button>
<button class="r-btn">Reset</button>
<div class="wrapper"></div>