求助：基于CSS Grid实现1-4元素的自定义动态网格布局

根据你描述的布局需求，以下是实现代码：

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem; /* 可选，添加元素间距 */
}

/* 单个元素时占满整行 */
.grid > :only-child {
  grid-column: 1 / -1;
}

/* 第三个元素且是最后一个时（即总共3个元素），占满整行 */
.grid > :nth-child(3):last-child {
  grid-column: 1 / -1;
}

效果说明： #

• 1个元素：自动占满两列宽度
• 2个元素：各占一列（50%宽度）
• 3个元素：前两个各占一列，第三个跨两列占满整行
• 4个元素：自动排列成2行2列的网格布局

代码解释： #

• grid-template-columns: repeat(2, 1fr) 定义基础两列网格，每列宽度均分可用空间
• :only-child 选择器针对仅含一个子元素的场景，让元素跨所有列
• :nth-child(3):last-child 精准匹配总元素数为3的情况，让第三个元素跨两列

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