Estoy tratando de crear un semicírculo como contenedor de una cuadrícula que tiene muchos elementos.
.circle { /* this is for sqaures */ display: grid; grid-template-columns: repeat(auto-fit, 25px); grid-template-rows: repeat(auto-fit, 25px); /* overflow: hidden; */ height: 40vh; width: 80vh; background-color: white; margin: 0px auto; margin-top: 10vh; border-radius: 40vh 40vh 0px 0px; } .squares { border: 1px solid black; }Pero cuando los elementos de la cuadrícula desbordan el semicírculo que es su contenedor, forman una línea negra en la parte inferior. Cómo prevenirlo y hacer que la cuadrícula continúe en dirección vertical.
Además, necesito que las cajas sean solo cuadradas y el ancho de la cuadrícula debe ser el mismo, pero la altura puede variar.
Simplemente agregue lo siguiente al selector .circle:
grid-auto-flow: row; grid-auto-rows: 25px;También puedes consultarlo aquí: https://codepen.io/serazoltan/pen/bGYRqjg