Container
Useful for setting the max-width of an element.
:where(html) {
--container: 1080px;
--container-0: none;
--container-1: 480px;
--container-2: 600px;
--container-3: 720px;
--container-4: 840px;
--container-5: 960px;
--container-6: 1080px;
--container-7: 1280px;
--container-8: 1440px;
--container-9: 1600px;
--container-10: 1920px;
}Using CSS Variables
CSS variables are great for creating consistency across designs. Think of them as preset magic numbers to harmonize your layouts.
/* Example */
.content {
width: 100%;
max-width: var(--container-7);
}Utility Classes
In addition to CSS variables, utility classes are also available. Helpful for constraining the width of content in a layout.
.container { max-width: var(--container); margin-inline: auto; }
.container-0 { max-width: var(--container-0); margin-inline: auto; }
.container-1 { max-width: var(--container-1); margin-inline: auto; }
.container-2 { max-width: var(--container-2); margin-inline: auto; }
.container-3 { max-width: var(--container-3); margin-inline: auto; }
.container-4 { max-width: var(--container-4); margin-inline: auto; }
.container-5 { max-width: var(--container-5); margin-inline: auto; }
.container-6 { max-width: var(--container-6); margin-inline: auto; }
.container-7 { max-width: var(--container-7); margin-inline: auto; }
.container-8 { max-width: var(--container-8); margin-inline: auto; }
.container-9 { max-width: var(--container-9); margin-inline: auto; }
.container-10 { max-width: var(--container-10); margin-inline: auto; }
← Previous
Aspect ratio
Next →
Space