I've created a basic CSS grid layout, but I'm running into an issue. The aside section keeps growing taller as new tree-item elements are added. Instead, I want to limit its height so it doesn’t exceed the main content and enable scrolling when it reaches that limit.
This layout is something I use in multiple projects, and I’m looking for the best and simplest way to achieve this.
Would CSS Grid be the right approach, or is there a better alternative?
<body>
<div class="grid">
<nav></nav>
<main></main>
<aside>
<div class="tree-item">A</div>
<!-- Add more tree-items -->
</aside>
<footer class="footer">Copyright ©</footer>
</div>
</body>
.grid {
display: grid;
grid-template-columns: 20rem 1fr;
grid-template-rows: 4rem 1fr 3rem;
height: 100vh;
width: 100vw;
background-color: bisque;
}
nav {
grid-column: 1/3;
grid-row: 1/1;
background-color: aliceblue;
align-self: center;
display: flex;
justify-content: space-between;
align-items: center;
}
aside {
grid-column: 1/2;
grid-row: 2/3;
background-color: aquamarine;
}
main {
grid-column: 2/3;
grid-row: 2/3;
background-color: chocolate;
}
footer {
grid-column: 1/3;
grid-row: 3/3;
text-align: center;
align-content: center;
}
.tree-item {
padding: 1rem;
background-color: blueviolet;
margin-bottom: 0.125rem;
text-align: center;
overflow-y: scroll;
}
Thanks!