how to make div size fixed? - html

Question

I have a problem in my project, where the size of the div varies, which shouldn't happen. I#ve put an example which shows it.
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>
If you do not pu the circle div in, A & B are the same height. But as soon as you put it into the A div, the size changes to perfectly equal the one of the circle, which I totally do not want to happen.
Since I'm building a Connect 4 game and I use the Border for the "GameField" it has to stay the same size.
I've already tried adding the parameter height: 690; to the A div (every circle is 115px->6 circles = 690) but then the align end did not work anymore. I also change between align-self: end; and align-self: flex-end; but that didn't change anything...
If what Im searching for isn't possible, I would love to know how else I can achieve a outline of a specificities set of cells in a css grid.
Thank you so much in advance for helping (or at least trying) me. <3

Answer 1

I didn't understand literally, but you can try and use this instead of above.
I think you can add the features you want (such as height) to this code I wrote.
.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 *:not(.circle):after {
content: attr(class);
position: absolute;
top: 0;
left: 0;
}
._ > div {
border: 1px solid red;
align-self: end;
position: relative;
display: inline-flex;
}
.circle {
width: 115px;
height: 115px;
background: red;
border-radius: 100px;
align-self: end;
}
.B {
height: 20px;
}
.C {
height: 30px;
}
.D {
height: 40px;
}
<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>
You don't have to use css for .A and .B, you're able to use like code above. Also I added two div to better understand
If I misunderstood, send me message back, I'll check again