CSS 网格布局调整大小答案

【问题标题】：CSS Grid Layout adapting sizeCSS 网格布局调整大小
【发布时间】：2021-11-11 20:01:03
【问题描述】：

我正在做一个学校项目，这是一个棋盘游戏，我必须在棋盘的一个区域放置多个玩家，我想用网格布局来实现，但我无法确定正确的位置。

我想让容器内只有一个 div 占据整个空间。如果容器内有两个 div，则两个项目并排占用一半空间。如果两行里面有三四个div，每行有两个div并排。

我当前的代码是：

#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-image: url('red.png');
    width: 100%;
    height: 100%;
    background-size: cover;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<table id="board">
    <tr>
        <td>
            <div class="playersDiv">
                <div></div>
                <div></div>
                <div></div>
            </div>
        </td>
    </tr>
</table>
</body>
</html>

【问题讨论】：

可以选择使用 flex 吗？
很遗憾，没有。
您说如果容器内只有一个 div，它会占用整个空间。如果容器内有两个 div，则占用一半空间。你说的容器是. playersDiv？在您的代码示例中有 3 个 div，这是否意味着您可以拥有超过 2 个？有上限吗？
容器是“.playersDiv”。内部的最大 div 为 4。内部的最小 div 为 1。

标签： html css

【解决方案1】：

如果我理解正确：

您的代码已经适用于 DIVs 内的 2、3 和 4 DIVs。
当只有 1 个DIV 时，它需要跨越 2 列。这可以使用:only-child 选择器和grid-column 属性来实现。

#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 {
  /* I've change these lines so we can see the DIVs in the snippet */
  border: 1px solid red;
}

#board td .playersDiv div:only-child {
  grid-column: span 2;
}

<table id="board">
  <tr>
    <!-- 1 div -->
    <td>
      <div class="playersDiv">
        <div></div>
      </div>
    </td>
    
    <!-- 2 div -->
    <td>
      <div class="playersDiv">
        <div></div>
        <div></div>
      </div>
    </td>
    
    <!-- 3 div -->
    <td>
      <div class="playersDiv">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </td>
    
    <!-- 4 div -->
    <td>
      <div class="playersDiv">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </td>
  </tr>
</table>

【讨论】：

是的，它几乎可以正常工作，但在第一种情况下它应该占据整个空间。link
我从您的回答中发现了这一点，我在那里又添加了一行：grid-row: span 2;。现在它可以工作了。谢谢。