0
171
VisualizaçõesHow to keep grid item responsive square and grid container with fixed height?
I'm trying to build a algorithm visualizer.
I want the grid container fill the rest view height and keep grid item square.
I've set body: height: 100vh, but when I set container height: 100% and set grid item aspect-ratio: 1 , grid container expand. How can I keep the fixed height of rest view height and make grid item responsive based on the change of view height?
now it look like this It should be a 25*25 board with height of rest view height.
what i want looks like this one, just give grid item fixed width, but I don't want to give the grid item fix width.
<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 à pergunta