CSS Grid如何自适应实现桌游棋盘单格内1-4个玩家元素的自动排布

你当前的代码固定了2行2列的网格模板，没有针对子元素数量做适配，仅需新增几行CSS规则即可实现全部需求：

#board td{
    background-color: black;
    height: 50px;
    width: 50px;
}

#board td .playersDiv {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

#board td .playersDiv div{
    /* 测试时可替换为background-color: red; 快速验证效果 */
    background-image: url('red.png');
    width: 100%;
    height: 100%;
    background-size: cover;
}

/* 单个子元素时占满整个容器 */
#board td .playersDiv div:only-child {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
}

/* 共2个子元素时，两个元素都占满整行高度 */
#board td .playersDiv div:nth-child(1):nth-last-child(2),
#board td .playersDiv div:nth-child(2):nth-last-child(1) {
    grid-row: 1 / -1;
}

规则说明 #

• 容器内仅1个div时，:only-child 选择器生效，让子元素跨所有网格列和行，直接占满整个容器
• 容器内刚好2个div时，组合选择器可以匹配到总子元素数为2的场景，让两个子元素都占满全部行高，实现横向并排各占一半宽度的效果
• 子元素数量为3-4时，保持默认2行2列的网格排布，自动每行放2个元素，完全匹配需求

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