I am building a monopoly with grid. When I break the divs apart, some fit perfectly inside the element that has the grid class, but some don't quite fit very well.
I'm not sure if it's because of browser rendering issues or if I'm doing something wrong. Below I have attached the html code, css and an image that clearly explains what I am saying is happening to me.
Here is the code:
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap:2em;
}
.element {
border:2px solid black;
height: 159px;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.largeElement {
grid-column: 2/5;
grid-row: 2/5;
border: none !important;
margin:0 auto;
font-size: 100px;
transform: rotate(-45deg);
padding-top: 200px;
}
.element p {
text-align: center;
padding:5px 0 0 0;
margin:0;
}
.topPart {
height: 50px;
}
.box05, .box07, .box08 {
height: 100%;
transform: rotate(90deg);
}
.box02, .box03, .box04 {
height: 100%;
transform: rotate(180deg);
}
.box01 {
height: 100%;
transform: rotate(135deg);
}
.box01, .box09 p {
text-align: center;
line-height: 150px;
}
.box09 {
height: 100%;
transform: rotate(45deg);
}
<div class="container">
<div class="grid">
<div class="element">
<div class="box01">
<p>1</p>
</div>
</div>
<div class="element">
<div class="box02">
<div class="topPart green"></div>
<p>2</p>
</div>
</div>
<div class="element">
<div class="box03">
<div class="topPart green"></div>
<p>3</p>
</div>
</div>
<div class="element">
<div class="box04">
<div class="topPart green"></div>
<p>4</p>
</div>
</div>
<div class="element">
<div class="box05">
<div class="topPart blue"></div>
<p>16</p>
</div>
</div>
<div class="largeElement">
<div class="box06">
MONOPOLY
</div>
</div>
<div class="element">
<div class="box07">
<div class="topPart blue"></div>
<p>15</p>
</div>
</div>
<div class="element">
<div class="box08">
<div class="topPart blue"></div>
<p>14</p>
</div>
</div>
<div class="element">
<div class="box09">
<p>9</p>
</div>
</div>
<div class="element">
<div class="box10">
<div class="topPart red"></div>
<p>12</p>
</div>
</div>
<div class="element">
<div class="box11">
<div class="topPart red"></div>
<p>11</p>
</div>
</div>
<div class="element">
<div class="box12">
<div class="topPart red"></div>
<p>10</p>
</div>
</div>
</div>
</div>
I attach an image to show exactly the problem I have since I don't quite understand what the problem is due to:
Thank you very much in advance
To close the question:
He was missing
width
from the classelement
. Since they are square elements and have aheight
static thewidth
should be the same.