<form action="">
<p>
<input type="checkbox" name="" id="start">
<label for="start">Align self: start</label>
</p>
</form>
<div class="wrapper">
<aside>
<h2>Sidebar</h2>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Works</a></li>
</ul>
</nav>
</aside>
<main>
<h2>Main</h2>
<div class="content">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus consectetur quas sunt magnam eos dolores molestias fugit! Consectetur aperiam, neque minus facere, tempora nobis doloribus dolores quo sed esse rerum?</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus consectetur quas sunt magnam eos dolores molestias fugit! Consectetur aperiam, neque minus facere, tempora nobis doloribus dolores quo sed esse rerum?</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus consectetur quas sunt magnam eos dolores molestias fugit! Consectetur aperiam, neque minus facere, tempora nobis doloribus dolores quo sed esse rerum?</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus consectetur quas sunt magnam eos dolores molestias fugit! Consectetur aperiam, neque minus facere, tempora nobis doloribus dolores quo sed esse rerum?</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus consectetur quas sunt magnam eos dolores molestias fugit! Consectetur aperiam, neque minus facere, tempora nobis doloribus dolores quo sed esse rerum?</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus consectetur quas sunt magnam eos dolores molestias fugit! Consectetur aperiam, neque minus facere, tempora nobis doloribus dolores quo sed esse rerum?</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus consectetur quas sunt magnam eos dolores molestias fugit! Consectetur aperiam, neque minus facere, tempora nobis doloribus dolores quo sed esse rerum?</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus consectetur quas sunt magnam eos dolores molestias fugit! Consectetur aperiam, neque minus facere, tempora nobis doloribus dolores quo sed esse rerum?</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus consectetur quas sunt magnam eos dolores molestias fugit! Consectetur aperiam, neque minus facere, tempora nobis doloribus dolores quo sed esse rerum?</p>
</div>
</main>
</div>
.wrapper {
max-width: 700px;
margin: 1rem auto;
display: grid;
grid-template-columns: 1fr;
grid-gap: 1rem;
@media (min-width: 32rem) {
grid-template-columns: 170px minmax(10px, 1fr);
}
> * {
padding: 1rem;
}
}
aside {
--align-self: stretch;
position: sticky;
top: 0;
align-self: var(--align-self);
background-color: lightblue;
}
/*Styles that aren't directly related to the demo*/
form {
padding: 1rem;
text-align: center;
}
main {
background-color: #f7f7f7;
p {
margin-bottom: 1rem;
}
}
nav {
li:not(:last-child) {
margin-bottom: 1rem;
}
}
h2 {
font-size: 1.25rem;
font-weight: bold;
margin-bottom: 1rem;
}
a {
color: #222;
text-decoration: none;
}
body {
font-family: system-ui;
line-height: 1.4;
}
View Compiled
let getAlignValue = document.querySelector("#start");
let aside = document.querySelector("aside");
getAlignValue.addEventListener("click", function () {
console.log(this.checked);
if (this.checked) {
aside.style.setProperty("--align-self", "start");
} else {
aside.style.setProperty("--align-self", "stretch");
}
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.