Estoy contruyendo un monopoly con grid. Cuando cuando roto los divs por separado, algunos quedan completamente bien encajados dentro del elemento que tiene la clase grid, pero algunos no se acaban de ajustar muy bien.
No tengo muy claro si es por temas de renderización del navegador o es que algo estoy haciendo mal. Abajo he adjuntado el código html, css y una imagen que explica claramente lo que comento que me sucede.
Aquí está el código:
.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>
Adjunto una imagen para enseñar exactamente el problema que tengo ya que no acabo de entender a que se debe el problema:
Muchas gracias de antemano
element
, por lo que veo son cuadrados... Despues de este cambio no logro simular tu problema ni con chrome ni con firefox..element { border:2px solid black; height: 159px; width: 159px; }