.box.box--100vw
.box__text
p #[b Gr]id
.box.box--mw
.box__text
p #[b M]ax Width
.box.box--column-left
.box__text
p Non-centered #[b C]olumn
.box.box--column-right
.box__text
p #[b S]idebar
.box.box--gap
.box__text
p #[b G]ap
.box.box--gap-left
.box__text
p #[b G]ap
.box.box--gap-right
.box__text
p #[b G]ap
.box.box--gutter.box--gutter-left
.box__text
p #[b Gu]tter
.box.box--gutter.box--gutter-right
.box__text
p #[b Gu]tter
.box.box--divide.box--divide-left
.box__text
p #[b L]eft #[b P]adding
.box.box--divide.box--divide-right
.box__text
p #[b R]ight #[b P]adding
.legend
.legend__row
p Gu = ((Gr - M) / 2) - G
p LP = Gu + G
p RP = LP + G + S
.legend__row
p Gr - 100%
p Gu - Gutter
p LP - Left Padding
p RP - Right Padding
p M - Max Width
p S - Sidebar
p G - Gap
View Compiled
:root {
--width-100vw: 100vw;
--width-grid: 60vw;
--width-col1: calc(var(--width-grid) * .6);
--width-col2: calc(var(--width-grid) * .3);
--width-gap: calc(var(--width-grid) * .1);
}
body {
min-height: 100vh;
padding: 0;
margin: 0;
position: relative;;
}
.box {
will-change: true;
position: absolute;
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-left: auto;
margin-right: auto;
opacity: 0;
animation-fill-mode: forwards;
animation-duration: 21s;
animation-iteration-count: infinite;
}
.box--100vw {
background-color: #4158D0;
width: var(--width-100vw);
left: 50%;
transform: translateX(-50%);
animation-name: revealvw;
}
.box--mw {
background-color: #C850C0;
width: var(--width-grid);
left: 50%;
transform: translateX(-50%);
animation-name: revealgr;
}
.box--column-left {
background-color: #00DBDE;
width: var(--width-col1);
left: calc((var(--width-100vw) - var(--width-grid)) / 2);
animation-name: revealcl;
}
.box--column-right {
background-color: #00DBDE;
width: var(--width-col2);
right: calc((var(--width-100vw) - var(--width-grid)) / 2);
animation-name: revealcr;
}
.box--gap {
background-color: #85FFBD;
width: var(--width-gap);
right: calc(((var(--width-100vw) - var(--width-grid)) / 2) + var(--width-col2));
animation-name: revealg;
}
.box--gap-left {
background-color: #85FFBD;
width: var(--width-gap);
right: calc(((var(--width-100vw) - var(--width-grid)) / 2) + var(--width-grid));
animation-name: revealg;
}
.box--gap-right {
background-color: #85FFBD;
width: var(--width-gap);
left: calc(((var(--width-100vw) - var(--width-grid)) / 2) + var(--width-grid));
animation-name: revealg;
}
.box--gutter {
background-color: #C850C0;
width: calc(((100vw - var(--width-grid)) / 2) - var(--width-gap));
animation-name: revealgu;
}
.box--gutter-left {
left: 0;
}
.box--gutter-right {
right: 0;
}
.box--divide {
background-color: #FFCC70;
}
.box--divide-left {
width: calc((var(--width-100vw) - var(--width-grid)) / 2);
left: 0;
animation-name: revealdl;
}
.box--divide-right {
width: calc(((var(--width-100vw) - var(--width-grid)) / 2) + var(--width-gap) + var(--width-col2));
right: 0;
animation-name: revealdr;
}
.box__text {
text-align: center;
@media screen and (max-width: 600px) {
writing-mode: vertical-rl;
transform: rotate(180deg);
}
}
p {
margin: 0;
line-height: 2;
}
.legend {
background-color: #FFFB7D;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
.legend__row {
display: flex;
flex-wrap: wrap;
justify-content: center;
p {
padding-left: .5em;
padding-right: .5em;
}
}
@keyframes revealvw {
0% {
opacity: 0;
}
2%,
100% {
opacity: 1;
}
}
@keyframes revealgr {
0%,
11% {
opacity: 0;
}
13%,
100% {
opacity: 1;
}
}
@keyframes revealcl {
0%,
21% {
opacity: 0;
}
23%,
100% {
opacity: 1;
}
}
@keyframes revealcr {
0%,
31% {
opacity: 0;
}
33%,
100% {
opacity: 1;
}
}
@keyframes revealg {
0%,
41% {
opacity: 0;
}
43%,
100% {
opacity: 1;
}
}
@keyframes revealgu {
0%,
51% {
opacity: 0;
}
53%,
100% {
opacity: 1;
}
}
@keyframes revealdl {
0%,
61% {
opacity: 0;
}
63%,
100% {
opacity: 1;
}
}
@keyframes revealdr {
0%,
71% {
opacity: 0;
}
73%,
100% {
opacity: 1;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.