0
175
Vistas¿Cómo mantener el cuadrado receptivo del elemento de cuadrícula y el contenedor de cuadrícula con altura fija?
Estoy tratando de crear un visualizador de algoritmos.
Quiero que el contenedor de la cuadrícula llene el resto de la altura de la vue y mantenga el elemento de la cuadrícula cuadrado.
Configuré body: height: 100vh , pero cuando configuré height: 100% y establecer la aspect-ratio: 1 , expandir el contenedor de la cuadrícula. ¿Cómo puedo mantener la altura fija de la altura de la vue de descanso y hacer que el elemento de la cuadrícula responda según el cambio de la altura de la vue?
ahora se ve así Debe ser un tablero de 25 * 25 con la altura de la altura de la vue de descanso.{ ***} 
lo que quiero se parece a este, solo dale un ancho fijo al elemento de la cuadrícula, pero no quiero darle un ancho fijo al elemento de la cuadrícula.
<body class="bg-dark flex flex--dir-col">
<nav class="text-dark flex center nav">
<a class="btn add-start-point">Add Start Point</a>
<a class="btn add-end-point">Add End Point</a>
<select class="btn pathfinder">
<option disabled selected value>Pathfinder Algo</option>
<option value="bfs">bfs</option>
<option value="dfs">dfs</option>
</select>
<select class="btn maze">
<option disabled selected value>Maze Generate Algo</option>
<option value="als-bor">Aldous-Border</option>
</select>
<a class="btn start-btn">Start</a>
<a class="btn reset-btn">Reset</a>
</nav>
<div class="flex center container">
<div class="board grid bg-white"></div>
</div>
</body>
body {
line-height: 1.5;
font-size: 62.5%;
min-height: 100vh;
}
.container {
flex: 1;
margin-inline: auto;
width: 100%;
padding: 1rem;
background-color: #eee;
display: inline-block;
}
.board {
margin-inline: auto;
min-height: 100%;
}
.cell {
aspect-ratio: 1/1;
transition-duration: 1s;
border: 1px solid black;
}
·
Santiago Trujillo
Responde la pregunta