如何用CSS实现动态增减元素时遵循指定布局（最多5个元素）

当然可以，用CSS Grid就能轻松搞定这种根据子元素数量自动适配的布局，完美支持你动态添加/移除元素（最多5个）的场景。以下是具体实现方案：

核心实现 #

利用CSS Grid的灵活特性，结合:has()伪类（或JS动态加类），根据容器内子元素的数量自动切换布局规则，完全匹配你给出的布局模式。

HTML结构 #

<div class="dynamic-container">
  <!-- 这里动态添加/移除.item元素，最多5个 -->
  <div class="item">1</div>
</div>

CSS样式 #

/* 容器基础样式 */
.dynamic-container {
  width: 400px; /* 可根据需求调整容器尺寸 */
  height: 400px;
  border: 2px solid #ddd;
  display: grid;
  gap: 8px; /* 元素间的间距，按需调整 */
  padding: 8px;
}

/* 子元素基础样式 */
.item {
  background: #4285f4;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border-radius: 4px;
}

/* 1个元素：居中显示 */
.dynamic-container:has(:only-child) {
  place-items: center;
}
.dynamic-container:has(:only-child) .item {
  width: 80%;
  height: 80%;
}

/* 2个元素：左右平分宽度 */
.dynamic-container:has(.item:nth-child(2)):not(:has(.item:nth-child(3))) {
  grid-template-columns: 1fr 1fr;
}

/* 3个元素：横向三等分 */
.dynamic-container:has(.item:nth-child(3)):not(:has(.item:nth-child(4))) {
  grid-template-columns: 1fr 1fr 1fr;
}

/* 4个元素：2行2列网格 */
.dynamic-container:has(.item:nth-child(4)):not(:has(.item:nth-child(5))) {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

/* 5个元素：顶部2个平分、底部3个三等分 */
.dynamic-container:has(.item:nth-child(5)) {
  grid-template-columns: repeat(6, 1fr); /* 分成6等份实现比例适配 */
  grid-template-rows: 1fr 1fr;
}
.dynamic-container:has(.item:nth-child(5)) .item:nth-child(1),
.dynamic-container:has(.item:nth-child(5)) .item:nth-child(2) {
  grid-column: span 3; /* 各占3份，填满第一行 */
}
.dynamic-container:has(.item:nth-child(5)) .item:nth-child(3),
.dynamic-container:has(.item:nth-child(5)) .item:nth-child(4),
.dynamic-container:has(.item:nth-child(5)) .item:nth-child(5) {
  grid-column: span 2; /* 各占2份，填满第二行 */
  grid-row: 2;
}

兼容旧浏览器方案 #

如果你的项目需要兼容不支持:has()伪类的旧浏览器，可以用JavaScript监听元素增删事件，给容器动态添加对应数量的类名：

const container = document.querySelector('.dynamic-container');

function updateLayoutClass() {
  const count = container.children.length;
  // 移除旧的数量类
  container.classList.forEach(cls => {
    if (cls.startsWith('item-count-')) container.classList.remove(cls);
  });
  // 添加新的数量类
  container.classList.add(`item-count-${count}`);
}

// 示例：添加元素的方法
function addItem() {
  if (container.children.length >= 5) return;
  const item = document.createElement('div');
  item.className = 'item';
  item.textContent = container.children.length + 1;
  container.appendChild(item);
  updateLayoutClass();
}

// 示例：移除元素的方法
function removeItem() {
  if (container.children.length === 0) return;
  container.removeChild(container.lastChild);
  updateLayoutClass();
}

对应的CSS替换为类选择器：

/* 1个元素 */
.dynamic-container.item-count-1 {
  place-items: center;
}
.dynamic-container.item-count-1 .item {
  width: 80%;
  height: 80%;
}

/* 2个元素 */
.dynamic-container.item-count-2 {
  grid-template-columns: 1fr 1fr;
}

/* 3个元素 */
.dynamic-container.item-count-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

/* 4个元素 */
.dynamic-container.item-count-4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

/* 5个元素 */
.dynamic-container.item-count-5 {
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1fr 1fr;
}
.dynamic-container.item-count-5 .item:nth-child(1),
.dynamic-container.item-count-5 .item:nth-child(2) {
  grid-column: span 3;
}
.dynamic-container.item-count-5 .item:nth-child(3),
.dynamic-container.item-count-5 .item:nth-child(4),
.dynamic-container.item-count-5 .item:nth-child(5) {
  grid-column: span 2;
  grid-row: 2;
}

内容的提问来源于stack exchange，提问作者Bobson Tobson