如何固定div大小？

Question

我的项目中存在一个问题，其中div的大小会有所不同，这是不应该发生的。我已经举了一个显示它的示例。

html, body, .grid-container { height: 100%; margin: 0; }

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 1px 1px;
}

._ {
  display: grid;
  grid-template-columns: 120px 120px;
  grid-template-rows: 1fr 1fr;
  gap: 1px 1px;
  grid-area: 1 / 2 / 4 / 4;
}

.A { grid-area: 1 / 1 / 3 / 2;
    align-self: flex-end;
    border: 1px solid red;
    position: relative;
    }

.B { grid-area: 1 / 2 / 3 / 3;
    border: 1px solid red;
    position: relative;
    }


.grid-container *:after { 
 content:attr(class);
 position: absolute;
 top: 0;
 left: 0;
}

.circle {
  width: 115px;
  height: 115px;
  background: red;
  border-radius: 100px;
}

<div class="grid-container">
  <div class="_">
    <div class="A">
      <div class="circle"></div>
    </div>
    <div class="B"></div>
  </div>
</div>

[如果您不按入div，则A和B的高度相同。但是，一旦将其放入A div中，其大小就会更改为完全等于该圆圈中的一个，这是我完全不想发生的。因为我正在构建Connect 4游戏，并且将边框用于“ GameField”，所以它必须保持相同的大小。

我已经尝试将参数height: 690;添加到A div（每个圆为115px-> 6圆= 690），但是对齐端不再起作用。我也在align-self: end;和align-self: flex-end;之间切换，但没有任何改变...

如果无法进行Im搜索，我很想知道我还能如何在CSS网格中获得细胞特异性集的轮廓。

非常感谢您帮助（或至少尝试）我。 <3

Answer 1

我从字面上听不懂，但是您可以尝试使用它而不是上面的方法

.grid-container {
    display: inline-table;
}
._ {
    display: grid;
    grid-template-columns: 120px 120px;
    grid-template-rows: 1fr 1fr;
    gap: 1px 1px;
    grid-area: 1 / 2 / 4 / 4;
}
.grid-container *:after {
    content: attr(class);
    position: absolute;
    top: 0;
    left: 0;
    display: contents;
}
._ > div {
    border: 1px solid red;
}
.circle {
    width: 115px;
    height: 115px;
    background: red;
    border-radius: 100px;
}

<div class="grid-container">
  <div class="_">
    <div class="A">
      <div class="circle"></div>
    </div>
    <div class="B"></div>
  <div class="C"></div><div class="D"></div></div>
</div>

此外，您不必使用.A或.B，也可以使用上面的类似代码

如果我误解了，请给我发回邮件，我会再检查一次