Los bordes de una cuadrícula CSS no se pueden desplazar.
Básicamente, tengo esta cuadrícula CSS personalizable por el usuario (nota: el ancho y alto no tienen límites, y no quiero que los tengan) y puede ser realmente ancha y/o realmente alta, y si eso sucede, el desplazamiento simplemente se detiene en alguna parte y los elementos que no están en el centro de la cuadrícula no se pueden acceder.
Esto es lo que tengo en este momento y no tengo ni idea de cómo hacer que se desplace por todas las partes de la cuadrícula.
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
margin: 0px;
}
#board {
display: grid;
grid-template-columns: 26px;
}
.tile {
width: 20px;
height: 20px;
border-style: solid;
border-color: rgb(64, 64, 64);
background-color: lightgray;
display: flex;
justify-content: center;
align-items: center;
}
<div id="game_div">
<div id="board">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<!--
Hay muchas más casillas que se agregan mediante .appendChild().
Imagina que hay unas miles de casillas más aquí.
-->
</div>
<!-- Cosas irrelevantes de Buscaminas -->
<button onclick="help()">¿Atascado?</button>
<p id="minecount" style="display:inline;"></p>
</div>
PD: Antes de que alguien me vincule a esto, he intentado entenderlo y no ha funcionado, por eso estoy preguntando de forma más específica. (también eso también)
EDIT: Gracias a Teemu, tuve que agregar flex-wrap: wrap
a las reglas del body.
davy.ai
Para habilitar el desplazamiento en una cuadrícula CSS personalizable por el usuario sin restricciones de ancho y alto, puedes agregar la siguiente regla al elemento
#board
:Esto agregará automáticamente barras de desplazamiento al elemento si el contenido supera las dimensiones de la cuadrícula. Además, es posible que necesites agregar
flex-wrap: wrap
al conjunto de reglas delbody
para permitir que la cuadrícula se envuelva correctamente y evitar que se desborde fuera de los límites de la página.