下面是一个使用display: grid;和:has() CSS伪类的纯CSS解决方案。使用:has()，我们可以根据元素的子元素数来应用样式：

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

只有当id="container"包含至少3个子元素时，上述样式才适用于该元素。
JS Fiddle
（JavaScript仅用于将div添加到容器中以供演示）

资料来源：

介绍如何根据元素的子元素计数设置元素样式的文章：https://www.matuzo.at/blog/2022/counting-children/
:has() CSS伪类：https://developer.mozilla.org/en-US/docs/Web/CSS/:has

有一个纯CSS解决方案比has（https://caniuse.com/?search=has）具有更好的浏览器支持。
当父对象的样式需要依赖于它拥有的子对象时，就需要使用has了。在这种情况下，你可以根据子对象的兄弟数量来设置它们自己的样式。你可以使用flexbox，或者更老的东西，比如floats（我想你也可以使用grid，但是我还没有坐下来弄清楚具体是怎么做的）。
你要做的是通常规划三列，强制条目的宽度为1/3（根据你的设计，你可能需要一些小技巧来允许边距），然后在少于五个条目的情况下覆盖它。

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  width: calc(100% / 3);
}

/* for one item */
.child:only-child {
  width: 100%;
}

/* for two items */
.child:nth-child(1):nth-last-child(2),
.child:nth-child(2):nth-last-child(1) {
  width: 50%;
}

/* for three items */
.child:nth-child(1):nth-last-child(3),
.child:nth-child(2):nth-last-child(2),
.child:nth-child(3):nth-last-child(1) {
  width: 50%;
}

/* for four items */
.child:nth-child(1):nth-last-child(4),
.child:nth-child(2):nth-last-child(3),
.child:nth-child(3):nth-last-child(2),
.child:nth-child(4):nth-last-child(1) {
  width: 50%;
}

从本质上讲，这些nth-child选择器是在说“如果从开始数起的第一个项目也是从结束数起的第四个项目，那么肯定有四个项目”。在@Dimitris Maragkos分享的文章（https://alistapart.com/article/quantity-queries-for-css/）的链接中有对这种技术的完整解释。
如果你想测试的话，我已经把所有这些都放在https://codepen.io/jonedge/pen/abapJEK的笔里了，注意我在这里使用了一个child类来提高可读性，但是当使用flex和grid时，我通常推荐使用.parent > *来选择flex/grid容器的所有直接子容器。

使用提交和重置Buttons为K值创建Input，创建div容器.wrapper。
CSS:给我的容器400x400大小。声明一个:root变量--width:50%;，用于设置将通过JS生成的单个框的宽度。
JS:在submit按钮上添加EventListener。我要做的第一件事是获取input（K）的值。设置if条件以检查用户是否已经生成任何divs，如果已经生成，我将使用innerHTML = ""删除 Package 器内的所有内容
设置另一个if来检查数字是否大于4，然后通过将:root中的变量值更改为"--width：33%"，使每个框的大小为33%，以满足我们的3x3要求。
在for loop内循环以创建我们的盒子。盒子将生成(k)Times。在createBox内添加html并在wrapper内添加它。我希望你理解。如果你有任何问题请问。

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>