Last active
January 22, 2025 08:42
-
-
Save dorinvancea/9a24a55e1f6d4dc0dd7813b75106fd7c to your computer and use it in GitHub Desktop.
CSS clamp common sizes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Base Sizes: | |
| https://chrisburnell.com/clamp-calculator/?font-size-root=10&size-min=14&size-max=16&viewport-min=516&viewport-max=960&viewport-units=vi | |
| */ | |
| :root { | |
| --size-2: 0.2rem; | |
| --size-4: 0.4rem; | |
| --size-6: clamp(0.4rem, 0.168rem + 0.45vi, 0.6rem); | |
| --size-8: clamp(0.6rem, 0.368rem + 0.45vi, 0.8rem); | |
| --size-10: clamp(0.8rem, 0.568rem + 0.45vi, 1rem); | |
| --size-12: clamp(1rem, 0.768rem + 0.45vi, 1.2rem); | |
| --size-14: clamp(1.2rem, 0.968rem + 0.45vi, 1.4rem); | |
| --size-16: clamp(1.4rem, 1.168rem + 0.45vi, 1.6rem); | |
| --size-18: clamp(1.6rem, 1.368rem + 0.45vi, 1.8rem); | |
| --size-20: clamp(1.6rem, 1.135rem + 0.901vi, 2rem); | |
| --size-24: clamp(1.8rem, 1.103rem + 1.351vi, 2.4rem); | |
| --size-28: clamp(2.4rem, 1.935rem + 0.901vi, 2.8rem); | |
| --size-32: clamp(2.6rem, 1.903rem + 1.351vi, 3.2rem); | |
| --size-40: clamp(3.2rem, 2.27rem + 1.802vi, 4rem); | |
| --size-48: clamp(3.8rem, 2.638rem + 2.252vi, 4.8rem); | |
| --size-56: clamp(4rem, 2.141rem + 3.604vi, 5.6rem); | |
| --size-64: clamp(4.8rem, 2.941rem + 3.604vi, 6.4rem); | |
| --size-80: clamp(6.4rem, 4.541rem + 3.604vi, 8rem); | |
| --size-96: clamp(7.2rem, 4.411rem + 5.405vi, 9.6rem); | |
| --size-112: clamp(8.4rem, 5.146rem + 6.306vi, 11.2rem); | |
| --size-128: clamp(9.6rem, 5.881rem + 7.207vi, 12.8rem); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root { | |
| --size-0: 0; | |
| --size-2: 0.2rem; | |
| --size-4: 0.4rem; | |
| --size-6: 0.6rem; | |
| --size-8: 0.8rem; | |
| --size-10: 1rem; | |
| --size-11: 1.1rem; | |
| --size-12: 1.2rem; | |
| --size-13: 1.3rem; | |
| --size-14: 1.4rem; | |
| --size-15: 1.5rem; | |
| --size-16: 1.6rem; | |
| --size-18: 1.8rem; | |
| --size-20: 2rem; | |
| --size-24: 2.4rem; | |
| --size-26: 2.6rem; | |
| --size-28: 2.8rem; | |
| --size-32: 3.2rem; | |
| --size-40: 4rem; | |
| --size-48: 4.8rem; | |
| --size-56: 5.6rem; | |
| --size-64: 6.4rem; | |
| --size-80: 8rem; | |
| --size-96: 9.6rem; | |
| --size-112: 11.2rem; | |
| --size-128: 12.8rem; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Spacing | |
| ------------------------------------ */ | |
| .m-auto { | |
| margin: auto; | |
| } | |
| .m-0 { | |
| margin: var(--size-0); | |
| } | |
| .m-2 { | |
| margin: var(--size-2); | |
| } | |
| .m-4 { | |
| margin: var(--size-4); | |
| } | |
| .m-6 { | |
| margin: var(--size-6); | |
| } | |
| .m-8 { | |
| margin: var(--size-8); | |
| } | |
| .m-10 { | |
| margin: var(--size-10); | |
| } | |
| .m-12 { | |
| margin: var(--size-12); | |
| } | |
| .m-14 { | |
| margin: var(--size-14); | |
| } | |
| .m-16 { | |
| margin: var(--size-16); | |
| } | |
| .m-18 { | |
| margin: var(--size-18); | |
| } | |
| .m-20 { | |
| margin: var(--size-20); | |
| } | |
| .m-24 { | |
| margin: var(--size-24); | |
| } | |
| .m-28 { | |
| margin: var(--size-28); | |
| } | |
| .m-32 { | |
| margin: var(--size-32); | |
| } | |
| .m-40 { | |
| margin: var(--size-40); | |
| } | |
| .m-48 { | |
| margin: var(--size-48); | |
| } | |
| .m-56 { | |
| margin: var(--size-56); | |
| } | |
| .m-64 { | |
| margin: var(--size-64); | |
| } | |
| .m-80 { | |
| margin: var(--size-80); | |
| } | |
| .m-96 { | |
| margin: var(--size-96); | |
| } | |
| .m-112 { | |
| margin: var(--size-112); | |
| } | |
| .m-128 { | |
| margin: var(--size-128); | |
| } | |
| .mt-auto { | |
| margin-block-start: auto; | |
| } | |
| .mt-0 { | |
| margin-block-start: var(--size-0); | |
| } | |
| .mt-2 { | |
| margin-block-start: var(--size-2); | |
| } | |
| .mt-4 { | |
| margin-block-start: var(--size-4); | |
| } | |
| .mt-6 { | |
| margin-block-start: var(--size-6); | |
| } | |
| .mt-8 { | |
| margin-block-start: var(--size-8); | |
| } | |
| .mt-10 { | |
| margin-block-start: var(--size-10); | |
| } | |
| .mt-12 { | |
| margin-block-start: var(--size-12); | |
| } | |
| .mt-14 { | |
| margin-block-start: var(--size-14); | |
| } | |
| .mt-16 { | |
| margin-block-start: var(--size-16); | |
| } | |
| .mt-18 { | |
| margin-block-start: var(--size-18); | |
| } | |
| .mt-20 { | |
| margin-block-start: var(--size-20); | |
| } | |
| .mt-24 { | |
| margin-block-start: var(--size-24); | |
| } | |
| .mt-28 { | |
| margin-block-start: var(--size-28); | |
| } | |
| .mt-32 { | |
| margin-block-start: var(--size-32); | |
| } | |
| .mt-40 { | |
| margin-block-start: var(--size-40); | |
| } | |
| .mt-48 { | |
| margin-block-start: var(--size-48); | |
| } | |
| .mt-56 { | |
| margin-block-start: var(--size-56); | |
| } | |
| .mt-64 { | |
| margin-block-start: var(--size-64); | |
| } | |
| .mt-80 { | |
| margin-block-start: var(--size-80); | |
| } | |
| .mt-96 { | |
| margin-block-start: var(--size-96); | |
| } | |
| .mt-112 { | |
| margin-block-start: var(--size-112); | |
| } | |
| .mt-128 { | |
| margin-block-start: var(--size-128); | |
| } | |
| .mb-auto { | |
| margin-block-end: auto; | |
| } | |
| .mb-0 { | |
| margin-block-end: var(--size-0); | |
| } | |
| .mb-2 { | |
| margin-block-end: var(--size-2); | |
| } | |
| .mb-4 { | |
| margin-block-end: var(--size-4); | |
| } | |
| .mb-6 { | |
| margin-block-end: var(--size-6); | |
| } | |
| .mb-8 { | |
| margin-block-end: var(--size-8); | |
| } | |
| .mb-10 { | |
| margin-block-end: var(--size-10); | |
| } | |
| .mb-12 { | |
| margin-block-end: var(--size-12); | |
| } | |
| .mb-14 { | |
| margin-block-end: var(--size-14); | |
| } | |
| .mb-16 { | |
| margin-block-end: var(--size-16); | |
| } | |
| .mb-18 { | |
| margin-block-end: var(--size-18); | |
| } | |
| .mb-20 { | |
| margin-block-end: var(--size-20); | |
| } | |
| .mb-24 { | |
| margin-block-end: var(--size-24); | |
| } | |
| .mb-28 { | |
| margin-block-end: var(--size-28); | |
| } | |
| .mb-32 { | |
| margin-block-end: var(--size-32); | |
| } | |
| .mb-40 { | |
| margin-block-end: var(--size-40); | |
| } | |
| .mb-48 { | |
| margin-block-end: var(--size-48); | |
| } | |
| .mb-56 { | |
| margin-block-end: var(--size-56); | |
| } | |
| .mb-64 { | |
| margin-block-end: var(--size-64); | |
| } | |
| .mb-80 { | |
| margin-block-end: var(--size-80); | |
| } | |
| .mb-96 { | |
| margin-block-end: var(--size-96); | |
| } | |
| .mb-112 { | |
| margin-block-end: var(--size-112); | |
| } | |
| .mb-128 { | |
| margin-block-end: var(--size-128); | |
| } | |
| .ml-auto { | |
| margin-inline-start: auto; | |
| } | |
| .ml-0 { | |
| margin-inline-start: var(--size-0); | |
| } | |
| .ml-2 { | |
| margin-inline-start: var(--size-2); | |
| } | |
| .ml-4 { | |
| margin-inline-start: var(--size-4); | |
| } | |
| .ml-6 { | |
| margin-inline-start: var(--size-6); | |
| } | |
| .ml-8 { | |
| margin-inline-start: var(--size-8); | |
| } | |
| .ml-10 { | |
| margin-inline-start: var(--size-10); | |
| } | |
| .ml-12 { | |
| margin-inline-start: var(--size-12); | |
| } | |
| .ml-14 { | |
| margin-inline-start: var(--size-14); | |
| } | |
| .ml-16 { | |
| margin-inline-start: var(--size-16); | |
| } | |
| .ml-18 { | |
| margin-inline-start: var(--size-18); | |
| } | |
| .ml-20 { | |
| margin-inline-start: var(--size-20); | |
| } | |
| .ml-24 { | |
| margin-inline-start: var(--size-24); | |
| } | |
| .ml-28 { | |
| margin-inline-start: var(--size-28); | |
| } | |
| .ml-32 { | |
| margin-inline-start: var(--size-32); | |
| } | |
| .ml-40 { | |
| margin-inline-start: var(--size-40); | |
| } | |
| .ml-48 { | |
| margin-inline-start: var(--size-48); | |
| } | |
| .ml-56 { | |
| margin-inline-start: var(--size-56); | |
| } | |
| .ml-64 { | |
| margin-inline-start: var(--size-64); | |
| } | |
| .ml-80 { | |
| margin-inline-start: var(--size-80); | |
| } | |
| .ml-96 { | |
| margin-inline-start: var(--size-96); | |
| } | |
| .ml-112 { | |
| margin-inline-start: var(--size-112); | |
| } | |
| .ml-128 { | |
| margin-inline-start: var(--size-128); | |
| } | |
| .mr-auto { | |
| margin-inline-end: auto; | |
| } | |
| .mr-0 { | |
| margin-inline-end: var(--size-0); | |
| } | |
| .mr-2 { | |
| margin-inline-end: var(--size-2); | |
| } | |
| .mr-4 { | |
| margin-inline-end: var(--size-4); | |
| } | |
| .mr-6 { | |
| margin-inline-end: var(--size-6); | |
| } | |
| .mr-8 { | |
| margin-inline-end: var(--size-8); | |
| } | |
| .mr-10 { | |
| margin-inline-end: var(--size-10); | |
| } | |
| .mr-12 { | |
| margin-inline-end: var(--size-12); | |
| } | |
| .mr-14 { | |
| margin-inline-end: var(--size-14); | |
| } | |
| .mr-16 { | |
| margin-inline-end: var(--size-16); | |
| } | |
| .mr-18 { | |
| margin-inline-end: var(--size-18); | |
| } | |
| .mr-20 { | |
| margin-inline-end: var(--size-20); | |
| } | |
| .mr-24 { | |
| margin-inline-end: var(--size-24); | |
| } | |
| .mr-28 { | |
| margin-inline-end: var(--size-28); | |
| } | |
| .mr-32 { | |
| margin-inline-end: var(--size-32); | |
| } | |
| .mr-40 { | |
| margin-inline-end: var(--size-40); | |
| } | |
| .mr-48 { | |
| margin-inline-end: var(--size-48); | |
| } | |
| .mr-56 { | |
| margin-inline-end: var(--size-56); | |
| } | |
| .mr-64 { | |
| margin-inline-end: var(--size-64); | |
| } | |
| .mr-80 { | |
| margin-inline-end: var(--size-80); | |
| } | |
| .mr-96 { | |
| margin-inline-end: var(--size-96); | |
| } | |
| .mr-112 { | |
| margin-inline-end: var(--size-112); | |
| } | |
| .mr-128 { | |
| margin-inline-end: var(--size-128); | |
| } | |
| .p-auto { | |
| padding: auto; | |
| } | |
| .p-0 { | |
| padding: var(--size-0); | |
| } | |
| .p-2 { | |
| padding: var(--size-2); | |
| } | |
| .p-4 { | |
| padding: var(--size-4); | |
| } | |
| .p-6 { | |
| padding: var(--size-6); | |
| } | |
| .p-8 { | |
| padding: var(--size-8); | |
| } | |
| .p-10 { | |
| padding: var(--size-10); | |
| } | |
| .p-12 { | |
| padding: var(--size-12); | |
| } | |
| .p-14 { | |
| padding: var(--size-14); | |
| } | |
| .p-16 { | |
| padding: var(--size-16); | |
| } | |
| .p-18 { | |
| padding: var(--size-18); | |
| } | |
| .p-20 { | |
| padding: var(--size-20); | |
| } | |
| .p-24 { | |
| padding: var(--size-24); | |
| } | |
| .p-28 { | |
| padding: var(--size-28); | |
| } | |
| .p-32 { | |
| padding: var(--size-32); | |
| } | |
| .p-40 { | |
| padding: var(--size-40); | |
| } | |
| .p-48 { | |
| padding: var(--size-48); | |
| } | |
| .p-56 { | |
| padding: var(--size-56); | |
| } | |
| .p-64 { | |
| padding: var(--size-64); | |
| } | |
| .p-80 { | |
| padding: var(--size-80); | |
| } | |
| .p-96 { | |
| padding: var(--size-96); | |
| } | |
| .p-112 { | |
| padding: var(--size-112); | |
| } | |
| .p-128 { | |
| padding: var(--size-128); | |
| } | |
| .pt-auto { | |
| padding-block-start: auto; | |
| } | |
| .pt-0 { | |
| padding-block-start: var(--size-0); | |
| } | |
| .pt-2 { | |
| padding-block-start: var(--size-2); | |
| } | |
| .pt-4 { | |
| padding-block-start: var(--size-4); | |
| } | |
| .pt-6 { | |
| padding-block-start: var(--size-6); | |
| } | |
| .pt-8 { | |
| padding-block-start: var(--size-8); | |
| } | |
| .pt-10 { | |
| padding-block-start: var(--size-10); | |
| } | |
| .pt-12 { | |
| padding-block-start: var(--size-12); | |
| } | |
| .pt-14 { | |
| padding-block-start: var(--size-14); | |
| } | |
| .pt-16 { | |
| padding-block-start: var(--size-16); | |
| } | |
| .pt-18 { | |
| padding-block-start: var(--size-18); | |
| } | |
| .pt-20 { | |
| padding-block-start: var(--size-20); | |
| } | |
| .pt-24 { | |
| padding-block-start: var(--size-24); | |
| } | |
| .pt-28 { | |
| padding-block-start: var(--size-28); | |
| } | |
| .pt-32 { | |
| padding-block-start: var(--size-32); | |
| } | |
| .pt-40 { | |
| padding-block-start: var(--size-40); | |
| } | |
| .pt-48 { | |
| padding-block-start: var(--size-48); | |
| } | |
| .pt-56 { | |
| padding-block-start: var(--size-56); | |
| } | |
| .pt-64 { | |
| padding-block-start: var(--size-64); | |
| } | |
| .pt-80 { | |
| padding-block-start: var(--size-80); | |
| } | |
| .pt-96 { | |
| padding-block-start: var(--size-96); | |
| } | |
| .pt-112 { | |
| padding-block-start: var(--size-112); | |
| } | |
| .pt-128 { | |
| padding-block-start: var(--size-128); | |
| } | |
| .pb-auto { | |
| padding-block-end: auto; | |
| } | |
| .pb-0 { | |
| padding-block-end: var(--size-0); | |
| } | |
| .pb-2 { | |
| padding-block-end: var(--size-2); | |
| } | |
| .pb-4 { | |
| padding-block-end: var(--size-4); | |
| } | |
| .pb-6 { | |
| padding-block-end: var(--size-6); | |
| } | |
| .pb-8 { | |
| padding-block-end: var(--size-8); | |
| } | |
| .pb-10 { | |
| padding-block-end: var(--size-10); | |
| } | |
| .pb-12 { | |
| padding-block-end: var(--size-12); | |
| } | |
| .pb-14 { | |
| padding-block-end: var(--size-14); | |
| } | |
| .pb-16 { | |
| padding-block-end: var(--size-16); | |
| } | |
| .pb-18 { | |
| padding-block-end: var(--size-18); | |
| } | |
| .pb-20 { | |
| padding-block-end: var(--size-20); | |
| } | |
| .pb-24 { | |
| padding-block-end: var(--size-24); | |
| } | |
| .pb-28 { | |
| padding-block-end: var(--size-28); | |
| } | |
| .pb-32 { | |
| padding-block-end: var(--size-32); | |
| } | |
| .pb-40 { | |
| padding-block-end: var(--size-40); | |
| } | |
| .pb-48 { | |
| padding-block-end: var(--size-48); | |
| } | |
| .pb-56 { | |
| padding-block-end: var(--size-56); | |
| } | |
| .pb-64 { | |
| padding-block-end: var(--size-64); | |
| } | |
| .pb-80 { | |
| padding-block-end: var(--size-80); | |
| } | |
| .pb-96 { | |
| padding-block-end: var(--size-96); | |
| } | |
| .pb-112 { | |
| padding-block-end: var(--size-112); | |
| } | |
| .pb-128 { | |
| padding-block-end: var(--size-128); | |
| } | |
| .pl-auto { | |
| padding-inline-start: auto; | |
| } | |
| .pl-0 { | |
| padding-inline-start: var(--size-0); | |
| } | |
| .pl-2 { | |
| padding-inline-start: var(--size-2); | |
| } | |
| .pl-4 { | |
| padding-inline-start: var(--size-4); | |
| } | |
| .pl-6 { | |
| padding-inline-start: var(--size-6); | |
| } | |
| .pl-8 { | |
| padding-inline-start: var(--size-8); | |
| } | |
| .pl-10 { | |
| padding-inline-start: var(--size-10); | |
| } | |
| .pl-12 { | |
| padding-inline-start: var(--size-12); | |
| } | |
| .pl-14 { | |
| padding-inline-start: var(--size-14); | |
| } | |
| .pl-16 { | |
| padding-inline-start: var(--size-16); | |
| } | |
| .pl-18 { | |
| padding-inline-start: var(--size-18); | |
| } | |
| .pl-20 { | |
| padding-inline-start: var(--size-20); | |
| } | |
| .pl-24 { | |
| padding-inline-start: var(--size-24); | |
| } | |
| .pl-28 { | |
| padding-inline-start: var(--size-28); | |
| } | |
| .pl-32 { | |
| padding-inline-start: var(--size-32); | |
| } | |
| .pl-40 { | |
| padding-inline-start: var(--size-40); | |
| } | |
| .pl-48 { | |
| padding-inline-start: var(--size-48); | |
| } | |
| .pl-56 { | |
| padding-inline-start: var(--size-56); | |
| } | |
| .pl-64 { | |
| padding-inline-start: var(--size-64); | |
| } | |
| .pl-80 { | |
| padding-inline-start: var(--size-80); | |
| } | |
| .pl-96 { | |
| padding-inline-start: var(--size-96); | |
| } | |
| .pl-112 { | |
| padding-inline-start: var(--size-112); | |
| } | |
| .pl-128 { | |
| padding-inline-start: var(--size-128); | |
| } | |
| .pr-auto { | |
| padding-inline-end: auto; | |
| } | |
| .pr-0 { | |
| padding-inline-end: var(--size-0); | |
| } | |
| .pr-2 { | |
| padding-inline-end: var(--size-2); | |
| } | |
| .pr-4 { | |
| padding-inline-end: var(--size-4); | |
| } | |
| .pr-6 { | |
| padding-inline-end: var(--size-6); | |
| } | |
| .pr-8 { | |
| padding-inline-end: var(--size-8); | |
| } | |
| .pr-10 { | |
| padding-inline-end: var(--size-10); | |
| } | |
| .pr-12 { | |
| padding-inline-end: var(--size-12); | |
| } | |
| .pr-14 { | |
| padding-inline-end: var(--size-14); | |
| } | |
| .pr-16 { | |
| padding-inline-end: var(--size-16); | |
| } | |
| .pr-18 { | |
| padding-inline-end: var(--size-18); | |
| } | |
| .pr-20 { | |
| padding-inline-end: var(--size-20); | |
| } | |
| .pr-24 { | |
| padding-inline-end: var(--size-24); | |
| } | |
| .pr-28 { | |
| padding-inline-end: var(--size-28); | |
| } | |
| .pr-32 { | |
| padding-inline-end: var(--size-32); | |
| } | |
| .pr-40 { | |
| padding-inline-end: var(--size-40); | |
| } | |
| .pr-48 { | |
| padding-inline-end: var(--size-48); | |
| } | |
| .pr-56 { | |
| padding-inline-end: var(--size-56); | |
| } | |
| .pr-64 { | |
| padding-inline-end: var(--size-64); | |
| } | |
| .pr-80 { | |
| padding-inline-end: var(--size-80); | |
| } | |
| .pr-96 { | |
| padding-inline-end: var(--size-96); | |
| } | |
| .pr-112 { | |
| padding-inline-end: var(--size-112); | |
| } | |
| .pr-128 { | |
| padding-inline-end: var(--size-128); | |
| } | |
| .gap-auto { | |
| gap: auto; | |
| } | |
| .gap-0 { | |
| gap: var(--size-0); | |
| } | |
| .gap-2 { | |
| gap: var(--size-2); | |
| } | |
| .gap-4 { | |
| gap: var(--size-4); | |
| } | |
| .gap-6 { | |
| gap: var(--size-6); | |
| } | |
| .gap-8 { | |
| gap: var(--size-8); | |
| } | |
| .gap-10 { | |
| gap: var(--size-10); | |
| } | |
| .gap-12 { | |
| gap: var(--size-12); | |
| } | |
| .gap-14 { | |
| gap: var(--size-14); | |
| } | |
| .gap-16 { | |
| gap: var(--size-16); | |
| } | |
| .gap-18 { | |
| gap: var(--size-18); | |
| } | |
| .gap-20 { | |
| gap: var(--size-20); | |
| } | |
| .gap-24 { | |
| gap: var(--size-24); | |
| } | |
| .gap-28 { | |
| gap: var(--size-28); | |
| } | |
| .gap-32 { | |
| gap: var(--size-32); | |
| } | |
| .gap-40 { | |
| gap: var(--size-40); | |
| } | |
| .gap-48 { | |
| gap: var(--size-48); | |
| } | |
| .gap-56 { | |
| gap: var(--size-56); | |
| } | |
| .gap-64 { | |
| gap: var(--size-64); | |
| } | |
| .gap-80 { | |
| gap: var(--size-80); | |
| } | |
| .gap-96 { | |
| gap: var(--size-96); | |
| } | |
| .gap-112 { | |
| gap: var(--size-112); | |
| } | |
| .gap-128 { | |
| gap: var(--size-128); | |
| } | |
| .size-x-auto { | |
| inline-size: auto; | |
| } | |
| .size-x-0 { | |
| inline-size: var(--size-0); | |
| } | |
| .size-x-2 { | |
| inline-size: var(--size-2); | |
| } | |
| .size-x-4 { | |
| inline-size: var(--size-4); | |
| } | |
| .size-x-6 { | |
| inline-size: var(--size-6); | |
| } | |
| .size-x-8 { | |
| inline-size: var(--size-8); | |
| } | |
| .size-x-10 { | |
| inline-size: var(--size-10); | |
| } | |
| .size-x-12 { | |
| inline-size: var(--size-12); | |
| } | |
| .size-x-14 { | |
| inline-size: var(--size-14); | |
| } | |
| .size-x-16 { | |
| inline-size: var(--size-16); | |
| } | |
| .size-x-18 { | |
| inline-size: var(--size-18); | |
| } | |
| .size-x-20 { | |
| inline-size: var(--size-20); | |
| } | |
| .size-x-24 { | |
| inline-size: var(--size-24); | |
| } | |
| .size-x-28 { | |
| inline-size: var(--size-28); | |
| } | |
| .size-x-32 { | |
| inline-size: var(--size-32); | |
| } | |
| .size-x-40 { | |
| inline-size: var(--size-40); | |
| } | |
| .size-x-48 { | |
| inline-size: var(--size-48); | |
| } | |
| .size-x-56 { | |
| inline-size: var(--size-56); | |
| } | |
| .size-x-64 { | |
| inline-size: var(--size-64); | |
| } | |
| .size-x-80 { | |
| inline-size: var(--size-80); | |
| } | |
| .size-x-96 { | |
| inline-size: var(--size-96); | |
| } | |
| .size-x-112 { | |
| inline-size: var(--size-112); | |
| } | |
| .size-x-128 { | |
| inline-size: var(--size-128); | |
| } | |
| .size-y-auto { | |
| block-size: auto; | |
| } | |
| .size-y-0 { | |
| block-size: var(--size-0); | |
| } | |
| .size-y-2 { | |
| block-size: var(--size-2); | |
| } | |
| .size-y-4 { | |
| block-size: var(--size-4); | |
| } | |
| .size-y-6 { | |
| block-size: var(--size-6); | |
| } | |
| .size-y-8 { | |
| block-size: var(--size-8); | |
| } | |
| .size-y-10 { | |
| block-size: var(--size-10); | |
| } | |
| .size-y-12 { | |
| block-size: var(--size-12); | |
| } | |
| .size-y-14 { | |
| block-size: var(--size-14); | |
| } | |
| .size-y-16 { | |
| block-size: var(--size-16); | |
| } | |
| .size-y-18 { | |
| block-size: var(--size-18); | |
| } | |
| .size-y-20 { | |
| block-size: var(--size-20); | |
| } | |
| .size-y-24 { | |
| block-size: var(--size-24); | |
| } | |
| .size-y-28 { | |
| block-size: var(--size-28); | |
| } | |
| .size-y-32 { | |
| block-size: var(--size-32); | |
| } | |
| .size-y-40 { | |
| block-size: var(--size-40); | |
| } | |
| .size-y-48 { | |
| block-size: var(--size-48); | |
| } | |
| .size-y-56 { | |
| block-size: var(--size-56); | |
| } | |
| .size-y-64 { | |
| block-size: var(--size-64); | |
| } | |
| .size-y-80 { | |
| block-size: var(--size-80); | |
| } | |
| .size-y-96 { | |
| block-size: var(--size-96); | |
| } | |
| .size-y-112 { | |
| block-size: var(--size-112); | |
| } | |
| .size-y-128 { | |
| block-size: var(--size-128); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment