.grid
.box Hero Box
.box.box--sticky Sticky Box
.box.box--alpha Full-bleed Box
.box.box--alpha Full-bleed Box
.box.box--alpha Full-bleed Box
.box.box--alpha Full-bleed Box
.box.box--alpha Full-bleed Box
.box.box--alpha Full-bleed Box
.box.box--alpha Full-bleed Box
.box.box--alpha Full-bleed Box
.box.box--alpha Full-bleed Box
View Compiled
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
:root {
--gap: 20px;
--cols: 1fr;
--max-width: calc(100% - 2 * var(--gap));
@media screen and (min-width: 768px) {
--max-width: 600px;
--aside-width: 200px;
--cols: 1fr var(--aside-width);
}
@media screen and (min-width: 980px) {
--max-width: 900px;
--aside-width: 300px;
}
}
.grid {
display: grid;
grid-gap: var(--gap);
grid-template-columns: var(--cols);
max-width: var(--max-width);
margin-left: auto;
margin-right: auto;
}
.box {
background-color: #C850C0;
padding-top: 10vmin;
padding-bottom: 10vmin;
text-align: center;
}
.box--alpha {
grid-column-start: 1;
position: relative;
z-index: 0;
&:before {
content: "";
background-color: #C850C0;
display: block;
position: absolute;
top: 0;
right: calc(((100vw - (100% + var(--gap) + var(--aside-width))) / -2) - (var(--aside-width) + var(--gap)));
bottom: 0;
left: calc((100vw - (100% + var(--gap) + var(--aside-width))) / -2);
z-index: -1;
}
}
.box--sticky {
background-color: #FFCC70;
@media screen and (min-width: 768px) {
position: sticky;
top: 0;
z-index: 1;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.