I'm trying to create a 40 x 40 grid of boxes with outlines that can be fully displayed on the screen without requiring scrolling. However, my current method causes the grid to exceed the screen size and forces me to scroll.
If the screen size changes, I want the individual box sizes to adjust accordingly, and I want the grid to completely fill the div it's contained in.
/* container styling */
.grid-container {
position: absolute;
margin: 10px;
}
/* individual box styling */
.node {
width: 40px;
height: 40px;
outline: 1px solid #0f0e0e;
display: inline-block;
}<div class="grid">
<div>
<div class="node"></div>
// .... repeated 40 times
<div class="node"></div>
</div>
// ....repeated 40 times
<div>
<div class="node"></div>
// .... repeated 40 times
<div class="node"></div>
</div>
</div>It's essentially a 30 x 30 grid, and I'd prefer to achieve this using only CSS.