PageSourceSearch

https://utopia.fyi/grid/calculator/?c=360,18,1.2,1240,20,1.25,5,2,…%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12

html utopia.fyi collected 2026-10-03 19:32:28 UTC 48,213 bytes, 88 lines download raw bytes

1<!doctype html>
2<html data-n-head-ssr>
3  <head>
4    <title>Fluid grid calculator | Utopia</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Fluid responsive design"><meta data-n-head="ssr" data-hid="og:description" property="og:description" content="Fluid responsive design"><meta data-n-head="ssr" data-hid="twitter:description" name="twitter:description" content="Fluid responsive design"><meta data-n-head="ssr" name="application-name" content="Utopia"><meta data-n-head="ssr" name="msapplication-TileColor" content="#041e31"><meta data-n-head="ssr" name="theme-color" content="#041e31"><meta data-n-head="ssr" property="og:site_name" content="Utopia"><meta data-n-head="ssr" property="og:locale" content="en_GB"><meta data-n-head="ssr" name="twitter:site" content="@trysmudford"><meta data-n-head="ssr" name="twitter:creator" content="@trysmudford"><meta data-n-head="ssr" property="og:type" content="website"><meta data-n-head="ssr" property="og:image:alt" content="Utopia"><meta data-n-head="ssr" name="twitter:card" content="summary_large_image"><meta data-n-head="ssr" data-hid="og:image" property="og:image" content="https://utopia.fyi/og.png"><meta data-n-head="ssr" data-hid="twitter:image" name="twitter:image" content="https://utopia.fyi/og.png"><meta data-n-head="ssr" data-hid="og:title" property="og:title" content="Fluid grid calculator"><meta data-n-head="ssr" data-hid="apple-mobile-web-app-title" name="apple-mobile-web-app-title" content="Fluid grid calculator"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link data-n-head="ssr" rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link data-n-head="ssr" rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link data-n-head="ssr" rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link data-n-head="ssr" rel="manifest" href="/manifest.json"><link data-n-head="ssr" rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"><link data-n-head="ssr" rel="preconnect" href="https://use.typekit.net"><link data-n-head="ssr" rel="preconnect" href="https://fonts.googleapis.com"><link data-n-head="ssr" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@600;800&display=swap"><link data-n-head="ssr" rel="stylesheet" href="https://use.typekit.net/jrc8luv.css"><link data-n-head="ssr" rel="alternate" type="application/rss+xml" href="https://utopia.fyi/feed.xml" title="Utopia RSS Feed"><link rel="preload" href="/_nuxt/e9415bcd97915c778bef.js" as="script"><link rel="preload" href="/_nuxt/fecd7d419df778ccfddf.js" as="script"><link rel="preload" href="/_nuxt/eb63641842b11c68bd67.js" as="script"><link rel="preload" href="/_nuxt/b58ffb6d88ca51f936e2.js" as="script"><link rel="preload" href="/_nuxt/32efede8da7c3969ccf1.js" as="script"><style data-vue-ssr-id="68689c90:0 b26370a8:0 7be4e0e8:0 971ef528:0 50f1144c:0 6767a36c:0 98dc32a8:0 2d1a5918:0 77ff72cc:0 107cedec:0 1616e9a8:0 421d87ac:0 5b3e9eb4:0 f2202928:0 4295be56:0 3191d5ad:0 7c23ba6f:0 2fbc84d0:0 729955a2:0">html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}body{margin:0}blockquote,figure,ol,pre,ul{padding:0;margin:0}img{max-width:100%;height:auto;border:none}article,aside,figure,footer,header,img,main,nav{display:block}iframe{border:none}a{text-decoration:none}a,button{color:inherit}button{background:0 0;font:inherit;padding:0;cursor:pointer;box-shadow:none;border:none}:focus{outline:1px solid var(--gold)}ol,p,ul{margin:0}html{height:100%}#__layout,#__nuxt,.layout,body{min-height:100%}.layout{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-transition:background-color .3s;transition:background-color .3s}.layout>*{width:100%}.layout>:nth-child(2){-webkit-box-flex:1;flex:1}.layout--grey{background-color:var(--lightest-grey)}:root{--font-sans:"source-sans-pro",sans-serif;--font-serif:"garamond-premier-pro-caption",serif;--font-code:"source-code-pro",monospace;--font-demo:"Inter",sans-serif;--white:#fff;--lightest-grey:#f1f2f3;--black:#222;--gold:#857047;--gold-1:#9d8d6c;--gold-5:#e1dbd1;--purple:#a9439a;--navy:#001f35;--navy-1:#334c5d;--navy-2:#667986;--navy-3:#99a5ae;--navy-4:#ccd2d7;--navy-5:#e5e9eb}.root,:root{--fluid-min-width:320;--fluid-max-width:1140;--fluid-screen:100vw;--fluid-bp:calc((var(--fluid-screen) - var(--fluid-min-width)/16*1rem)/(var(--fluid-max-width) - var(--fluid-min-width)))}.root{font-size:var(--step-0)}@media screen and (min-width:1140px){.root,:root{--fluid-screen:calc(var(--fluid-max-width)*1px)}}.root,:root{--f--3-min:8;--f--3-max:12;--step--3:calc(var(--f--3-min)/16*1rem + (var(--f--3-max) - var(--f--3-min))*var(--fluid-bp));--f--2-min:14.58;--f--2-max:15.36;--step--2:calc(var(--f--2-min)/16*1rem + (var(--f--2-max) - var(--f--2-min))*var(--fluid-bp));--f--1-min:17.50;--f--1-max:19.20;
4--step--1:calc(var(--f--1-min)/16*1rem + (var(--f--1-max) - var(--f--1-min))*var(--fluid-bp));--f--2-1-min:var(--f--2-min);--f--2-1-max:var(--f--1-max);--step--2-1:calc(var(--f--2-1-min)/16*1rem + (var(--f--2-1-max) - var(--f--2-1-min))*var(--fluid-bp));--f-0-min:21.00;--f-0-max:24.00;--step-0:calc(var(--f-0-min)/16*1rem + (var(--f-0-max) - var(--f-0-min))*var(--fluid-bp));--f-1-min:25.20;--f-1-max:30.00;--step-1:calc(var(--f-1-min)/16*1rem + (var(--f-1-max) - var(--f-1-min))*var(--fluid-bp));--f-2-min:30.24;--f-2-max:37.50;--step-2:calc(var(--f-2-min)/16*1rem + (var(--f-2-max) - var(--f-2-min))*var(--fluid-bp));--f-3-min:36.29;--f-3-max:46.88;--step-3:calc(var(--f-3-min)/16*1rem + (var(--f-3-max) - var(--f-3-min))*var(--fluid-bp));--f-4-min:43.55;--f-4-max:58.59;--step-4:calc(var(--f-4-min)/16*1rem + (var(--f-4-max) - var(--f-4-min))*var(--fluid-bp));--f-5-min:52.25;--f-5-max:73.24;--step-5:calc(var(--f-5-min)/16*1rem + (var(--f-5-max) - var(--f-5-min))*var(--fluid-bp));--fc-4xs-min:(var(--fc-s-min) * 0.125);--fc-4xs-max:(var(--fc-s-max) * 0.125);--fc-3xs-min:(var(--fc-s-min) * 0.25);--fc-3xs-max:(var(--fc-s-max) * 0.25);--fc-2xs-min:(var(--fc-s-min) * 0.5);--fc-2xs-max:(var(--fc-s-max) * 0.5);--fc-xs-min:(var(--fc-s-min) * 0.75);--fc-xs-max:(var(--fc-s-max) * 0.75);--fc-s-min:(var(--f-0-min));--fc-s-max:(var(--f-0-max));--fc-m-min:(var(--fc-s-min) * 1.5);--fc-m-max:(var(--fc-s-max) * 1.5);--fc-l-min:(var(--fc-s-min) * 2);--fc-l-max:(var(--fc-s-max) * 2);--fc-xl-min:(var(--fc-s-min) * 3);--fc-xl-max:(var(--fc-s-max) * 3);--fc-2xl-min:(var(--fc-s-min) * 4);--fc-2xl-max:(var(--fc-s-max) * 4);--fc-3xl-min:(var(--fc-s-min) * 6);--fc-3xl-max:(var(--fc-s-max) * 6);--space-4xs:calc(var(--fc-4xs-min)/16*1rem + (var(--fc-4xs-max) - var(--fc-4xs-min))*var(--fluid-bp));--space-3xs:calc(var(--fc-3xs-min)/16*1rem + (var(--fc-3xs-max) - var(--fc-3xs-min))*var(--fluid-bp));--space-2xs:calc(var(--fc-2xs-min)/16*1rem + (var(--fc-2xs-max) - var(--fc-2xs-min))*var(--fluid-bp));--space-xs:calc(var(--fc-xs-min)/16*1rem + (var(--fc-xs-max) - var(--fc-xs-min))*var(--fluid-bp));--space-s:calc(var(--fc-s-min)/16*1rem + (var(--fc-s-max) - var(--fc-s-min))*var(--fluid-bp));--space-m:calc(var(--fc-m-min)/16*1rem + (var(--fc-m-max) - var(--fc-m-min))*var(--fluid-bp));--space-l:calc(var(--fc-l-min)/16*1rem + (var(--fc-l-max) - var(--fc-l-min))*var(--fluid-bp));--space-xl:calc(var(--fc-xl-min)/16*1rem + (var(--fc-xl-max) - var(--fc-xl-min))*var(--fluid-bp));--space-2xl:calc(var(--fc-2xl-min)/16*1rem + (var(--fc-2xl-max) - var(--fc-2xl-min))*var(--fluid-bp));--space-3xl:calc(var(--fc-3xl-min)/16*1rem + (var(--fc-3xl-max) - var(--fc-3xl-min))*var(--fluid-bp));--space-3xs-2xs:calc(var(--fc-3xs-min)/16*1rem + (var(--fc-2xs-max) - var(--fc-3xs-min))*var(--fluid-bp));--space-2xs-xs:calc(var(--fc-2xs-min)/16*1rem + (var(--fc-xs-max) - var(--fc-2xs-min))*var(--fluid-bp));--space-xs-s:calc(var(--fc-xs-min)/16*1rem + (var(--fc-s-max) - var(--fc-xs-min))*var(--fluid-bp));--space-s-m:calc(var(--fc-s-min)/16*1rem + (var(--fc-m-max) - var(--fc-s-min))*var(--fluid-bp));--space-m-l:calc(var(--fc-m-min)/16*1rem + (var(--fc-l-max) - var(--fc-m-min))*var(--fluid-bp));--space-l-xl:calc(var(--fc-l-min)/16*1rem + (var(--fc-xl-max) - var(--fc-l-min))*var(--fluid-bp));--space-xl-2xl:calc(var(--fc-xl-min)/16*1rem + (var(--fc-2xl-max) - var(--fc-xl-min))*var(--fluid-bp));--space-2xl-3xl:calc(var(--fc-2xl-min)/16*1rem + (var(--fc-3xl-max) - var(--fc-2xl-min))*var(--fluid-bp));--space-s-l:calc(var(--fc-s-min)/16*1rem + (var(--fc-l-max) - var(--fc-s-min))*var(--fluid-bp));--space-2xs-s:calc(var(--fc-2xs-min)/16*1rem + (var(--fc-s-max) - var(--fc-2xs-min))*var(--fluid-bp));--gutter:var(--space-s-l);--negative-gutter:calc(var(--gutter)*-1)}:root{--prose-bottom-gap:0.25em;--prose-top-gap:0.25em}.additive-spacing{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-align:start;align-items:flex-start}.additive-spacing--large{--prose-bottom-gap:0.5em;--prose-top-gap:0.5em}.additive-spacing>*{margin-bottom:.25em;margin-bottom:var(--prose-bottom-gap);margin-top:.25em;margin-top:var(--prose-top-gap)}.additive-spacing>:first-child{margin-top:0}.additive-spacing>:last-child{margin-bottom:0}body{font:var(--step-0)/1.5 var(--font-serif);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:var(--navy)}.h1,.u-style-serif{-moz-osx-font-smoothing:initial;-webkit-font-smoothing:initial;font-feature-settings:"smcp";text-transform:lowercase;font-weight:700;color:var(--black);font-size:var(--step-1)}.u-style-label{font:var(--step--2)/1.2 var(--font-sans);text-transform:uppercase;font-weight:700;letter-spacing:.06em;color:var(--gold);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.u-style-label--lower{text-transform:none}.u-style-label small,small.u-style-label{text-transform:lowercase;font-size:var(--step--2);letter-spacing:0}.u-style-label--black{color:var(--black)}h1,h2,h3{line-height:1;margin:0}.u-strong,em,strong{font-weight:700}.screen-reader-only{clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);
4height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.u-step-5{font-size:var(--step-5)}.u-step-4{font-size:var(--step-4)}.u-step-3{font-size:var(--step-3)}.u-step-2{font-size:var(--step-2)}.u-step-1{font-size:var(--step-1)}.u-step-0{font-size:var(--step-0)}.u-step--1{font-size:var(--step--1)}.u-step--2{font-size:var(--step--2)}.u-step-1-rem{font-size:1rem}.u-font-code{font-family:var(--font-code)}.u-font-sans{font-family:var(--font-sans)}.u-color-gold{color:var(--gold)}.u-color-dark-grey{color:var(--navy-1)}.u-color-white{color:var(--white)}.u-color-mid-grey{color:var(--navy-2)}.u-underline{border-bottom:1px solid}.u-font-italic{font-style:italic}.prose em{color:var(--gold)}.prose strong{font-style:italic;font-weight:700}.u-text-align-left{text-align:left}.u-text-align-center{text-align:center}.u-text-align-right{text-align:right}.u-w-100{width:100%}table{min-width:100%;border-collapse:collapse;text-align:left;font-family:var(--font-sans)}table>*+*>:first-child>*,tr+tr>*{border-top:1px solid var(--navy-5)}table:not(.table-standard) tr>:first-child{border-right:1px solid var(--navy-5);box-shadow:1px 0 var(--navy-5);position:-webkit-sticky;position:sticky;left:0;background:#fff;width:85px}table:not(.table-standard) tr>:last-child{width:52px}td,th{padding:.25em .5em}.table--padded td,.table--padded th{padding:.5em}table .highlight>*{font-weight:700;background:rgba(230,235,240,.5)}table .highlight-bg>*{background:var(--navy-5)}@media screen and (min-width:600px){.table__top,.table__top--square{vertical-align:top}}table .table__multiplier{width:150px;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-bottom:.25em;padding-top:.25em}table .table__end{width:52px}.table__multiplier input{border-color:var(--navy-4)}.table__multiplier ::-webkit-inner-spin-button,.table__multiplier ::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.table__multiplier [type=number]{-moz-appearance:textfield}.table__single-button{text-align:right;width:40px}.table__double-button{width:100px}.table__steppers{width:200px}.prose--page>p:first-of-type:not([data-no-lede]){font-size:var(--step-1)}.prose ol>li{margin-left:1.5em;padding-left:1em}.prose ul>li{padding-left:1em;list-style:none;background:url('data:image/svg+xml;utf8,<svg width="8" height="12" xmlns="http://www.w3.org/2000/svg"><circle fill="%23b29a6b" cx="4" cy="4" r="4" fill-rule="evenodd"/></svg>') 0 .6em no-repeat;margin-left:1.25em}.prose li+li{margin-top:.5em}.prose>:not(h1):not(h2):not(h3):not(h4)+h2,.prose>:not(h1):not(h2):not(h3):not(h4)+h3,.prose>:not(h1):not(h2):not(h3):not(h4)+h4{--prose-top-gap:1em}.prose a,.u-style-link{font-style:italic;color:var(--gold);font-weight:700;text-decoration:underline}.prose blockquote{padding-bottom:var(--space-s);padding-top:var(--space-s)}.prose blockquote p{font-size:var(--step-2);color:var(--gold);line-height:1.25}code{background:var(--navy-5);font-size:var(--step--1)}pre code{font-size:var(--step--2);display:block}pre{background:var(--navy-5);padding:var(--space-s);max-width:100%;width:100%;overflow-y:auto}figure,pre{--prose-bottom-gap:1.5em;--prose-top-gap:1.5em}figcaption{font-size:var(--step--1);display:block;margin-top:.5em}hr{border:none;border-bottom:1px solid var(--navy-5)}.row-spacing>hr,hr{margin:var(--space-l) 0}.image-stack{position:relative}.image-stack>img+img{position:absolute;height:100%;width:100%;left:0;top:0;opacity:0;-webkit-animation:fade 4s ease-in-out infinite;animation:fade 4s ease-in-out infinite}@-webkit-keyframes fade{0%,80%{opacity:0}50%{opacity:1}}@keyframes fade{0%,80%{opacity:0}50%{opacity:1}}.wrap,.wrap--gutterless{margin-left:auto;margin-right:auto;position:relative;max-width:1048px;padding-left:var(--gutter);padding-right:var(--gutter);width:100%}.wrap--gutterless{padding-right:0;padding-left:0;max-width:calc(1048px - var(--gutter)*2)}.wrap--thin{max-width:500px}.insulate{padding-top:var(--space-l);padding-bottom:var(--space-l)}.insulate--large{padding-top:var(--space-xl);padding-bottom:var(--space-xl)}.row-spacing--major>*+*{margin-top:var(--space-l)}.row-spacing>*+*{margin-top:var(--space-s)}.row-spacing--xs>*+*{margin-top:var(--space-xs)}.row-spacing--2xs>*+*{margin-top:var(--space-2xs)}fieldset{margin:0;border:none;padding:0}legend{text-transform:uppercase;color:var(--gold);font-weight:600;letter-spacing:.06em;padding:0}label,legend{font-family:var(--font-sans);font-size:var(--step--2)}label{font-weight:700;display:block;margin:0 0 5px}label small{opacity:.8;font-size:.9em}.input-field label~label{margin:5px 0 0}select{-webkit-appearance:none;-moz-appearance:none;appearance:none}.faux-input,input,select{display:block;border:1px solid var(--navy-1);background:0 0;color:inherit;padding:.5em;font:inherit;font-family:var(--font-code);font-size:24px;width:100%;border-radius:0}option{color:var(--navy)}.faux-input{background:var(--navy-4);border-color:var(--navy-4)}[data-suffix]{position:relative}[data-suffix]:after{content:attr(data-suffix);position:absolute;right:var(--space-2xs);bottom:1.2rem;font-family:var(--font-sans);color:var(--navy-2);font-size:var(--step--2)}[data-suffix] input,[data-suffix] select{padding-right:2.25rem}.button{display:inline-block;background:var(--gold);border-radius:2em;color:var(--white);font-family:var(--font-sans);font-size:var(--step--1);padding:.6em 1.7em;font-weight:700;line-height:1.2}.button--blue{background:var(--navy-1)}.button--large{font-size:var(--step-0)}.button-circle{border-radius:100%;width:1.75rem;height:1.75rem;padding:0;line-height:1;display:inline-block;position:relative;vertical-align:middle}.button-circle--outline{border:1px solid;color:var(--gold)}.button-circle--black{color:var(--white);background:var(--black)}.button-circle--white{color:var(--black);background:var(--white)}.button-circle--gold{color:var(--white);background:var(--gold)}.button-circle svg{width:20px;height:20px;position:absolute;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);left:50%;
4top:50%}.button--add{font-family:var(--font-sans);display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.button--add .button-circle{margin-right:.5em}.button-circle[data-before]{position:relative}.button-circle[data-before]:before{content:attr(data-before);position:absolute;right:100%;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);font-weight:700;font-size:var(--step--2);white-space:nowrap;color:var(--gold);margin-right:var(--space-2xs)}.button--secondary{border:2px solid var(--gold);padding:calc(.6em - 2px) calc(1.7em - 2px);background:0 0;color:var(--gold);display:-webkit-inline-box;display:inline-flex;grid-gap:var(--space-2xs);gap:var(--space-2xs);-webkit-box-align:center;align-items:center;-webkit-transition:color .1s,background .1s;transition:color .1s,background .1s}.button--secondary:hover{background:var(--gold);color:var(--white)}.button-link{text-decoration:underline;color:var(--navy-1);-webkit-transition:color .3s;transition:color .3s}.button-link:hover{color:var(--navy-2)}.input-field--split{display:grid;grid-template-columns:1fr 1fr;grid-gap:var(--step-0);justify-items:center;-webkit-box-align:center;align-items:center}.input-field--disabled,[disabled]{opacity:.25;cursor:not-allowed}.input-field--disabled [disabled]{opacity:1}.inline-input{font-size:1rem}.stepper{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;white-space:nowrap}.stepper>:last-child{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.steppers{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;grid-gap:var(--space-2xs);gap:var(--space-2xs)}.stepper-gap{color:var(--navy-4);height:11px;display:block;line-height:0}.c-checkbox label{position:relative;padding-left:2rem;cursor:pointer}.c-checkbox label:before{content:"";width:1.25rem;height:1.25rem;position:absolute;left:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);border:1px solid}.c-checkbox :focus+label:before{outline:1px solid}.c-checkbox label:after{content:"";height:10px;width:5px;border-right:2px solid;border-bottom:2px solid;position:absolute;left:7.5px;top:5px;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}
4.c-checkbox :checked+label:after{opacity:1}.modal{--gold:var(--gold-1);-webkit-box-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-align:stretch;align-items:stretch;background:var(--navy);position:fixed;display:-webkit-box;display:flex;padding:var(--step-0);z-index:200;height:100%;width:100%;color:var(--navy-5);left:0;top:0;opacity:0;visibility:hidden;-webkit-transition:opacity .3s,visibility .3s;transition:opacity .3s,visibility .3s}.modal--open{opacity:1;visibility:visible}.modal__wrapper{max-height:100%;overflow-y:auto;min-height:400px}.modal__close{position:absolute;padding:1rem;right:0;top:0}.usps{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));grid-gap:var(--space-s)}.embed{align-self:stretch}.embed-wrapper{padding-bottom:56.25%;position:relative;height:0}.embed iframe,.embed video{position:absolute;width:100%;height:100%;left:0;top:0}.card__link{padding:var(--space-s)}.card__split{position:relative;padding-right:40px;width:100%}.card__split svg{margin-left:1em;position:absolute;right:0;top:0;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.card__split a:hover svg{-webkit-transform:translateX(.35em);transform:translateX(.35em)}.card--page{background:var(--navy);color:var(--white);position:relative}.card--page .card__link{display:-webkit-box;display:flex;padding:0;-webkit-box-pack:justify;justify-content:space-between;-webkit-box-align:center;align-items:center;height:100%}.card--page a>h2{padding:0 var(--space-s)}.card--page figure{background:var(--gold);padding:var(--space-xs);width:var(--space-l-xl);height:100%}.card--page figure div{height:0;padding-bottom:100%;position:relative}.card--page figure svg{position:absolute;left:50%;top:50%;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.card--page a:hover svg{-webkit-transform:translate(-50%,-50%) translateX(.35em);transform:translate(-50%,-50%) translateX(.35em)}.card--post{background:var(--navy-5);color:var(--black);display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.card--post>*{-webkit-box-flex:1;flex-grow:1}.card__link--showcase{-webkit-transition:opacity .2s;transition:opacity .2s;display:block}.card__link--showcase:hover{opacity:.95}.card--showcase .creator a{color:var(--gold);text-decoration:underline}.card--showcase>*+*{margin-top:var(--space-xs)}@supports (aspect-ratio:1){.card--showcase{width:100%}.card--showcase__image{position:relative;background:var(--white)}.card--showcase__image img{position:absolute;height:100%;width:100%;top:0;right:0;bottom:0;left:0;-o-object-fit:cover;object-fit:cover}[data-size=l] .card--showcase__image{aspect-ratio:1.333}[data-size=m] .card--showcase__image{aspect-ratio:.692}[data-size=s] .card--showcase__image{aspect-ratio:.457}}.cards{display:grid;grid-gap:var(--space-s-l)}.cards--two{grid-template-columns:repeat(auto-fill,minmax(min(calc(100vw - var(--gutter)*2),320px),1fr))}.cards--three{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}.flexi-card{background:#f7f8f9;padding-bottom:1rem;--opacity:0.5}.flexi-card__wrapper{min-height:450px;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center}.example-card{background:#124a80;color:#ebebeb;font-size:var(--step--1);font-family:var(--font-sans);padding:var(--space-s-l);margin:auto;max-width:450px;position:relative}.example-card p:first-child{opacity:.8}.example-card:after,.example-card:before{content:"";position:absolute;height:100%;width:100%;left:0;top:0;pointer-events:none;-webkit-transition:border-color .2s;transition:border-color .2s}.example-card:before{border-bottom:var(--space-s-l) solid rgba(169,67,154,var(--opacity));border-top:var(--space-s-l) solid rgba(169,67,154,var(--opacity))}.example-card:after{border-right:var(--space-s-l) solid rgba(169,67,154,var(--opacity));border-left:var(--space-s-l) solid rgba(169,67,154,var(--opacity))}.example-card a{color:inherit;text-decoration:none;font-style:normal;font-weight:400;display:block}.example-card a>*+:before{content:"";display:block;background:rgba(32,175,223,var(--opacity));height:var(--space-3xs-2xs);-webkit-transition:opacity .2s;transition:opacity .2s}.example-card h2{color:var(--white);font-size:var(--step-1)}.example-card p{line-height:1.6}.flexi-form{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;flex-wrap:wrap;margin-top:.5rem}.flexi-form{height:31px}.flexi-form .u-style-label{font-size:.875rem}.flexi-form [type=range]{padding:0;width:120px;cursor:-webkit-grab;cursor:grab}.flexi-form input:active{cursor:-webkit-grabbing;cursor:grabbing}.flexi-form>*+*{margin-left:1rem}@media (max-width:400px){.example-card{-webkit-transform:scale(.8) translateX(-2rem);transform:scale(.8) translateX(-2rem);width:calc(100% + 3rem)}.flexi-card__wrapper{height:360px;min-height:auto}}@media (max-width:370px){.example-card{-webkit-transform:scale(.6) translateX(-28%);transform:scale(.6) translateX(-28%);width:150%}.flexi-card__wrapper{height:280px;min-height:auto}}.calculator{background:var(--navy);color:var(--white);--gold:var(--gold-1)}.calculator__wrapper{display:grid;grid-template-columns:1fr 1px 1fr;grid-gap:var(--step-0)}.calculator__wrapper>.line{background:var(--navy-1)}@media screen and (min-width:50em){.calculator__wrapper{grid-template-columns:1fr 1fr;-webkit-box-align:start;align-items:start;grid-gap:var(--space-l)}.calculator__wrapper>.line{display:none}.calculator .fieldset{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:var(--space-2xs-xs) var(--space-s);-webkit-box-align:start;align-items:start}.calculator .fieldset legend{grid-column:span 3;border-bottom:1px solid var(--navy-1);padding-bottom:var(--space-2xs-xs)}.calculator .fieldset>*+*{margin-top:0}.calculator__scale-label{position:absolute}.calculator .button{grid-column:3/4;padding-right:.5em;padding-left:.5em}}.generator-title{margin-bottom:var(--space-s)}.generator-options{-webkit-box-pack:justify;justify-content:space-between;flex-wrap:wrap-reverse;grid-gap:var(--space-s);gap:var(--space-s)}.c-tabs{display:-webkit-box;display:flex;-webkit-box-pack:start;justify-content:flex-start;grid-gap:0;gap:0}.c-tabs--line{border-bottom:1px solid var(--navy-5)}.c-tab{--tab-background:var(--lightest-grey);padding:calc(var(--space-2xs) - 2px) var(--space-2xs) var(--space-2xs);background:var(--tab-background);margin:0;border-top:2px solid var(--tab-background);line-height:1.6;color:var(--navy-2);-webkit-transition:background-color .2s,border-color .2s;transition:background-color .2s,border-color .2s}.c-tab--icon{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;grid-gap:var(--space-3xs);gap:var(--space-3xs)}.c-tab--label{font:400 var(--step--2)/1.6 var(--font-sans);color:var(--navy-1)}label.c-tab{padding-left:var(--space-xs);padding-right:var(--space-xs);cursor:pointer}:checked+.c-tab,:focus+label.c-tab,label.c-tab:hover{--tab-background:var(--navy-5)}:checked+.c-tab{border-top-color:var(--gold);color:var(--gold)}.generator pre,.generator pre code{background:var(--lightest-grey)}.generator-link{color:var(--navy);font-weight:400;font-size:var(--step--2);font-family:var(--font-sans);display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;grid-gap:var(--space-3xs);gap:var(--space-3xs)}.generator-link:hover{text-decoration:underline;text-decoration-width:1px}.generator-header{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;grid-gap:var(--space-xs);gap:var(--space-xs);padding:var(--space-xs-s);background:var(--navy-5)}.generator-top-row>h3{letter-spacing:.02em;font-family:var(--font-sans);text-transform:uppercase;font-weight:700;color:var(--navy);font-size:var(--step--2)}.generator-top-row{-webkit-box-pack:justify;justify-content:space-between;grid-gap:var(--space-2xs) var(--space-s);gap:var(--space-2xs) var(--space-s);min-height:23px}.generator-header__options,.generator-top-row{display:-webkit-box;display:flex;flex-wrap:wrap;-webkit-box-align:center;align-items:center}.generator-header__options{-webkit-box-pack:end;justify-content:flex-end;grid-gap:var(--space-2xs) var(--space-xs-s);gap:var(--space-2xs) var(--space-xs-s)}.generator-options{display:-webkit-box;display:flex;flex-wrap:wrap;-webkit-box-align:center;align-items:center;-webkit-box-pack:start;justify-content:flex-start;grid-gap:var(--space-2xs) var(--space-s-l);gap:var(--space-2xs) var(--space-s-l)}.generator-header:empty{display:none}.generator-header .u-style-label{margin-bottom:0}.generator .c-checkbox,.generator .c-inline-input{align-self:flex-end;margin-bottom:var(--space-3xs);margin-top:var(--space-2xs)}.generator .c-checkbox :checked+label:before{background:var(--navy)}.generator .c-checkbox label:after{border-color:var(--white)}.c-generator-input label{font-weight:400}.c-generator-input input{width:100px}.generator-content{background:var(--lightest-grey);padding:var(--space-s)}.generator-content pre{padding:var(--space-xs) 0 0}.space{font-size:var(--step--2);font-family:var(--font-sans);display:grid;grid-gap:0;min-width:40px}.space__square{background:linear-gradient(135deg,rgba(169,67,154,.5),rgba(169,67,154,.4));display:none;border:none;-webkit-transition:all .25s ease-in-out;transition:all .25s ease-in-out;aspect-ratio:1;
4max-width:200px}.space output{display:block}@media screen and (min-width:600px){.space__square{display:-webkit-box;display:flex}.space{grid-template-rows:28px auto}.space output{margin-bottom:var(--space-2xs)}}.space-label{background:var(--gold);color:var(--white);font-weight:700;width:36px;height:36px;display:-webkit-inline-box;display:inline-flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;border-radius:100%;font-size:var(--step--2);letter-spacing:.02em;text-transform:uppercase;font-family:var(--font-sans)}.u-gold{color:var(--gold)}.u-mid-grey{color:var(--navy-2)}.u-black{color:var(--black)}.u-split{display:-webkit-box;display:flex;-webkit-box-pack:justify;justify-content:space-between;-webkit-box-align:center;align-items:center;flex-wrap:wrap;grid-gap:var(--space-s);gap:var(--space-s)}.u-split>:first-child:not(:only-child){padding-right:var(--space-s)}.nuxt-progress{position:fixed;top:0;left:0;right:0;height:2px;width:0;opacity:1;-webkit-transition:width .1s,opacity .4s;transition:width .1s,opacity .4s;background-color:#fff;z-index:999999}.nuxt-progress.nuxt-progress-notransition{-webkit-transition:none;transition:none}.nuxt-progress-failed{background-color:red}.top{padding:var(--space-2xs) 0 0;margin-bottom:var(--space-s-l);font-size:var(--step--2-1);color:var(--gold);font-family:var(--font-sans);font-weight:700}.top .wrap{-webkit-box-align:center;align-items:center;-webkit-box-pack:justify;justify-content:space-between;flex-wrap:wrap;grid-gap:var(--space-2xs-xs);gap:var(--space-2xs-xs)}.top .wrap,.top ul{display:-webkit-box;display:flex}.top ul{list-style:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;grid-gap:0 var(--space-2xs-s);gap:0 var(--space-2xs-s);-webkit-box-align:end;align-items:flex-end}.top .nuxt-link-active,.top li a:hover{text-decoration:underline}@media (min-width:400px){.top{padding:var(--space-s-l) 0 0}.top ul{-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}}@media (max-width:399px){.top ul{-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;flex-wrap:wrap;-webkit-box-pack:end;justify-content:flex-end;width:7.8rem}}.logo{width:161px;display:block;position:relative;max-width:44vw}.logo svg{width:100%;height:auto}.grid-table{margin-top:var(--gutter)}.grid-table thead tr>*{border-bottom:1px solid var(--navy-2);border-top:1px solid var(--navy-2);padding-top:var(--space-3xs-2xs);padding-bottom:var(--space-3xs-2xs)}.grid-table tbody>:last-child>*{border-bottom:1px solid var(--navy-5)}@media (max-width:374px){.grid-table,.grid-table th{font-size:var(--step--2)}}@media (max-width:400px){.grid-table{font-size:var(--step--1)}}.grid-table sup{font-size:.7em;margin-left:.25em}.grid-error{color:var(--purple)}.grid-table .grid-icon svg{color:var(--purple);-webkit-transform:translateY(1px);transform:translateY(1px);width:.8em;height:.8em}.grid-inputs{grid-template-columns:1fr;grid-gap:var(--gutter);margin-top:var(--gutter)}.grid-inputs,.grid-inputs>:first-child{display:grid;grid-template-columns:repeat(2,1fr)}.grid-inputs>:first-child{grid-gap:0 var(--space-s);grid-column:span 2}.grid-inputs>:first-child header{grid-column:span 2}@media (min-width:50em){.grid-inputs{grid-template-columns:repeat(4,1fr)}}.grid-inputs header{border-bottom:1px solid var(--navy-2);padding-bottom:var(--space-xs);margin-bottom:var(--space-xs)}.grid-inputs .u-style-label{margin:0}.grid-inputs header a{text-decoration:underline}.grid-inputs .steppers{display:-webkit-box;display:flex;-webkit-box-pack:start;justify-content:flex-start}.grid-inputs .step-wrapper{line-height:1}.grid-inputs .space{display:block}.grid-inputs .space output{font-size:var(--step-0);margin:0;line-height:1;display:block}.grid-inputs input{padding-right:.5em;margin-top:var(--space-l)}.live-grid{margin-left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:100vw;overflow:hidden}.live-grid ul{list-style:none;padding:0;border-left:var(--live-gutter) solid var(--live-show-gutters,#eed9eb);border-right:var(--live-gutter) solid var(--live-show-gutters,#eed9eb);background:#eed9eb;background:var(--live-show-gutters,#eed9eb);display:grid;grid-template-columns:repeat(var(--live-columns),1fr);grid-gap:var(--live-gutter);width:100%;max-width:calc(1px*var(--live-container));margin:0 auto;min-height:80px;-webkit-transition:background-color .3s,border-color .3s;transition:background-color .3s,border-color .3s}.live-grid li{margin:0}.live-grid__col{-webkit-box-flex:1;flex:1;background:var(--navy-5);background:var(--live-show-columns,var(--navy-5));-webkit-transition:background-color .3s;transition:background-color .3s;grid-row:1/-1}.live-grid__content,.live-grid__sidebar{grid-column:1/-1;grid-row:2;word-wrap:break-word}.live-grid__footer-wrapper{text-align:center;margin-bottom:var(--space-s)}.live-grid__footer{display:-webkit-inline-box;display:inline-flex;grid-gap:var(--space-2xs) var(--space-m);gap:var(--space-2xs) var(--space-m);flex-wrap:wrap;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;padding:var(--space-xs-s) var(--gutter);background:var(--white);box-shadow:0 8px 16px rgba(0,0,0,.1);max-width:calc(100% - var(--gutter)*2);width:auto;text-align:left;margin-top:var(--space-xs)}.example-label{opacity:var(--live-labels);-webkit-transition:opacity .3s;transition:opacity .3s}.grid-error-wrapper{background:rgba(169,67,154,.15);color:var(--purple);padding:var(--space-2xs) var(--space-xs);font-family:var(--font-sans);font-size:var(--step--1);display:-webkit-box;display:flex;grid-gap:var(--space-2xs);gap:var(--space-2xs);-webkit-box-align:center;align-items:center}.grid-error-wrapper svg{flex-shrink:0}.low{color:var(--gold);background-color:var(--navy);text-align:center;padding:var(--space-l) var(--space-s) var(--space-l);margin-top:var(--space-xl);--gold:var(--gold-1)}.low p{margin-bottom:var(--step-0)}.low p a{font-style:italic;font-weight:700;color:var(--white)}.low__logo,.low__logo-support{margin-bottom:.625em}</style>
5  </head>
6  <body>
7    <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div class="layout"><header role="banner" class="top"><nav class="wrap"><a href="/" class="logo u-style-serif nuxt-link-active"><img src="/images/logo.svg" width="161" height="38" alt="Utopia Logo"></a> <ul><li><a href="/type/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12">Type</a></li> <li><a href="/space/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12">Space</a></li> <li><a href="/grid/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12">Grid</a></li> <li><a href="/clamp/calculator?a=360,1240">Clamp</a></li> <li><a href="/blog">Blog</a></li> <li><a href="/showcase">Showcase</a></li> <li><a href="http://utopiafyi.teemill.com/" target="_blank" rel="noreferrer">Merch</a></li></ul></nav></header> <div class="row-spacing--major"><header class="wrap"><h1 class="h1">Fluid Grid Calculator</h1> <div class="modal"><button type="button" class="modal__close"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-x"><path d="M18 6L6 18M6 6l12 12"></path></svg></button> <div class="wrap wrap--thin modal__wrapper"><form class="row-spacing"><p>Calculate font sizes at these viewport widths:</p>  <button type="button" class="button--add"><span class="button-circle button-circle--white"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><title></title> <path d="M12 5v14M5 12h14"></path></svg></span>
8      Add
9    </button> <button type="submit" class="button button--large u-w-100">
10      Update table
11    </button></form></div></div></header> <form class="calculator"><div class="wrap insulate calculator__wrapper"><div class="fieldset row-spacing"><legend>Min viewport</legend> <div data-suffix="px" class="input-field"><label for="min-width">
12    Width
13  </label> <input type="number" id="min-width" value="360"></div> <div data-suffix="px" class="input-field"><label for="min-font-size">
14    Font size
15  </label> <input type="number" id="min-font-size" value="18"></div> <div class="input-field input-field--disabled"><label for="min-type-scale">Type scale</label> <select id="min-type-scale" disabled value="1.2"><option value="1.067">
16            1.067
17          </option><option value="1.125">
18            1.125
19          </option><option value="1.2">
20            1.2
21          </option><option value="1.25">
22            1.25
23          </option><option value="1.333">
24            1.333
25          </option><option value="1.414">
26            1.414
27          </option><option value="1.5">
28            1.5
29          </option><option value="1.618">
30            1.618
31          </option><option value="1.667">
32            1.667
33          </option><option value="1.778">
34            1.778
35          </option><option value="1.875">
36            1.875
37          </option><option value="2">
38            2
39          </option> <option value="custom">Custom</option></select> <label class="calculator__scale-label u-color-mid-grey">Minor Third</label></div> <!----></div> <span class="line"></span> <div class="fieldset row-spacing"><legend>Max viewport</legend> <div data-suffix="px" class="input-field"><label for="max-width">
40    Width
41  </label> <input type="number" id="max-width" value="1240"></div> <div data-suffix="px" class="input-field"><label for="max-font-size">
42    Font size
43  </label> <input type="number" id="max-font-size" value="20"></div> <div class="input-field input-field--disabled"><label for="max-type-scale">Type scale</label> <select id="max-type-scale" disabled value="1.25"><option value="1.067">
44            1.067
45          </option><option value="1.125">
46            1.125
47          </option><option value="1.2">
48            1.2
49          </option><option value="1.25">
50            1.25
51          </option><option value="1.333">
52            1.333
53          </option><option value="1.414">
54            1.414
55          </option><option value="1.5">
56            1.5
57          </option><option value="1.618">
58            1.618
59          </option><option value="1.667">
60            1.667
61          </option><option value="1.778">
62            1.778
63          </option><option value="1.875">
64            1.875
65          </option><option value="2">
66            2
67          </option> <option value="custom">Custom</option></select> <label class="calculator__scale-label u-color-mid-grey">Major Third</label></div> <!----></div></div></form> <div class="wrap row-spacing--major"><div class="row-spacing"><div class="prose additive-spacing additive-spacing--large"><p>The grid calculator uses responsive tokens from your <a href="/space/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12">space palette</a> to construct a series of gutters and columns for your designs to live within. Rather than creating different grids for a number of breakpoints, think of this as one grid which can be viewed from any perspective. If you’re not sure where to start, <a href="/blog/designing-a-utopian-layout-grid">this blog post</a> might help.</p></div> <div class="grid-inputs"><div><header><h2 class="u-style-label u-style-label--black">Gutter width</h2></header> <div class="steppers"><div class="stepper"><button type="button"><svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" fill="none" viewBox="0 0 21 20"><path stroke="#AC905D" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.833 13.333L10.5 6.667l6.667 6.666"></path> <title>Increase the size</title></svg></button> <strong class="space-label">s</strong> <button type="button" disabled><svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" fill="none" viewBox="0 0 21 20"><path stroke="#AC905D" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.833 13.333L10.5 6.667l6.667 6.666"></path> <title>Decrease the size</title></svg></button></div> <div class="step-wrapper"><strong class="u-style-label u-style-label--lower">@min</strong> <div class="space space--no-square"><output>18px</output> <!----></div></div></div> <div class="steppers"><div class="stepper"><button type="button"><svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" fill="none" viewBox="0 0 21 20"><path stroke="#AC905D" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.833 13.333L10.5 6.667l6.667 6.666"></path> <title>Increase the size</title></svg></button> <strong class="space-label">l</strong> <button type="button" disabled><svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" fill="none" viewBox="0 0 21 20"><path stroke="#AC905D" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.833 13.333L10.5 6.667l6.667 6.666"></path> <title>Decrease the size</title></svg></button></div> <div class="step-wrapper"><strong class="u-style-label u-style-label--lower">@max</strong> <div class="space space--no-square"><output>40px</output> <!----></div></div></div></div> <div><header><h2 class="u-style-label u-style-label--black">Column max width</h2></header> <div class="steppers"><div class="stepper"><button type="button"><svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" fill="none" viewBox="0 0 21 20"><path stroke="#AC905D" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.833 13.333L10.5 6.667l6.667 6.666"></path> <title>Increase the size</title></svg></button> <strong class="space-label">xl</strong> <button type="button" disabled><svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" fill="none" viewBox="0 0 21 20"><path stroke="#AC905D" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.833 13.333L10.5 6.667l6.667 6.666"></path> <title>Decrease the size</title></svg></button></div> <div class="step-wrapper"><div class="space space--no-square"><output>60px</output> <!----></div></div></div></div> <div><header><label for="maxGridColumnCount" class="u-style-label u-style-label--black">Number of columns</label></header> <div data-suffix="" class="input-field"><!---->
67 <input type="number" id="maxGridColumnCount" min="1" max="64" step="1" value="12"></div></div></div> <!----><!----><!----><!----><!----><!----><!----> <div class="prose additive-spacing"><h2>CSS Generator</h2> <p>Your 12 columns complete the calculation to generate your maximum container width. But creating a fully coded grid system requires the nuance and context that only you have.</p> <p>This generated CSS is therefore intentionally minimal to provide the foundations to help you build your custom grid, without imposing a particular column-based approach on you.</p> <p><a href="https://gridless.design/">Donnie D’Amato</a> and <a href="https://bradfrost.com/blog/post/layout-grid-in-design-systems/">Brad Frost</a> have both discussed working with grids at length; their posts are well worth your time.</p></div> <pre><code>/* @link https://utopia.fyi/grid/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
68
69:root {
70  --grid-max-width: 77.50rem;
71  --grid-gutter: var(--space-s-l, clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem));
72  --grid-columns: 12;
73}
74
75.u-container {
76  max-width: var(--grid-max-width);
77  padding-inline: var(--grid-gutter);
78  margin-inline: auto;
79}
80
81.u-grid {
82  display: grid;
83  gap: var(--grid-gutter);
84}</code></pre></div></div></div> <footer role="contentinfo" class="low"><p class="u-font-serif u-color-mid-grey u-step--2 u-font-italic">
85    Created by <a href="https://www.hustlersquad.net/">James Gilyead</a> &
86    <a href="https://www.trysmudford.com">Trys Mudford</a></p> <div class="u-style-label low__logo-support">Supported by</div> <a href="https://clearleft.com"><svg role="img" aria-labelledby="clearleft-logo" xmlns="http://www.w3.org/2000/svg" width="182.52" height="64" viewBox="0 0 154 54" class="low__logo"><title id="clearleft-logo">Clearleft</title> <style>.Logo-streak{mask-repeat:no-repeat;stroke-dasharray:150% 150%;stroke-dashoffset:150%}.animateLogo-streak{animation:swipe .4s cubic-bezier(.39,.575,.565,1) .8s forwards}@keyframes swipe{from{stroke-dashoffset:150%}to{stroke-dashoffset:0}}</style> <path fill="#FFF" d="M152.5 27.5v5.4h-2.4c-5.5 0-8.6-3.3-8.6-9.3v-6.8h-7.4v16.1h-5.6V16.8h-3.1l-.1-4.6h3.1v-.6c0-6 3-9.3 8.6-9.3h2.4v5.4H137c-2 0-2.9 1.3-2.9 4v.6h7.4v-4l5.6-3.6v7.4h4v4.6h-4v6.8c0 2.7 1 4 2.9 4h2.5zM77 11.9h5.6v21H77v-2c-1.7 1.7-4 2.7-6.4 2.6-5.7 0-10.1-4.8-10.1-11s4.4-11 10.1-11c2.4-.1 4.7.8 6.4 2.5v-2.1zm0 10.5c0-3.5-2.4-6.1-5.6-6.1s-5.6 2.6-5.6 6.1 2.3 6.1 5.6 6.1S77 26 77 22.4zm12.9-8.7v-1.8h-5.4v21h5.6v-9.5c0-4.5.8-6.8 5-6.8h1.5v-5.4h-.2c-3 0-5.2.9-6.5 2.5zM98 32.8h5.6V2.4H98v30.4zM17 8.1c3.2 0 6.1 1.8 7.6 4.5l.1.2.2-.1 4.8-3.1.3-.1-.1-.2C27 5 22.2 2.4 17.1 2.4 8.6 2.3 1.6 9.1 1.5 17.5v.3c-.1 8.5 6.8 15.4 15.3 15.5h.3c5.1.1 9.9-2.5 12.8-6.7l.1-.2-5.2-3.4-.1.2c-1.6 2.7-4.5 4.4-7.6 4.5-5.2 0-9.2-4.3-9.2-9.8 0-4.8 3.4-9.8 9.1-9.8zm14.6 24.7h5.6V2.4h-5.6v30.4zm94-10.5c0 .6 0 1.1-.1 1.7v.5h-14.8c.5 2.5 2.8 4.3 5.4 4.1 2 0 3.9-.7 5.5-2l.4-.3 2.8 4-.3.3c-2.4 2-5.5 3.1-8.6 3-6.4 0-10.8-4.6-10.8-11.1s4.3-11.1 10.6-11.1c5.7-.2 9.8 4.4 9.9 10.9zm-5.7-2.2c-.6-2.5-2.2-3.9-4.5-3.9-2.4-.1-4.4 1.6-4.7 3.9h9.2zm-60.7 2.2c0 .6 0 1.1-.1 1.7v.5H44.3c.5 2.5 2.8 4.3 5.4 4.1 2 0 3.9-.7 5.5-2l.4-.3 2.8 4-.3.3c-2.4 2-5.5 3.1-8.6 3-6.4 0-10.8-4.6-10.8-11.1S43 11.2 49.2 11.2c5.9 0 10 4.6 10 11.1zm-5.6-2.2c-.6-2.5-2.2-3.9-4.5-3.9-2.4-.1-4.4 1.6-4.7 3.9h9.2z" class="Logo-text"></path> <clipPath id="mask"><path d="M151.8 44c-.2-1-1.1-1.6-2-1.4h-.1c-1.1.4-2.2.4-3.3.2-1.4-.2-2.9-.3-4.3-.5-2.4-.3-4.8-.5-7.2-.7-2.6-.2-5.3-.3-7.9-.5-2.5-.2-4.9-.4-7.4-.5-5.2-.3-10.5-.5-15.7-.6-4.4-.2-19.6-.3-23.9-.3-3.1 0-6.1.1-9.2.2-4.1 0-18.9.3-23 .6-4.3.2-8.7.4-13 .7-4 .3-8 .5-11.9.7-.9 0-1.8.1-2.7.3-2.4 0-4.4.2-6.5.3-1.7.1-3.4.1-5 .4v0c-.7 0-1-.4-2.1-.3s-2.1.5-2.1 1.1c-.5.1 0 .4-.6.5v.5c.4.2.6.4 0 .7v.2c.3-.1.4 0 .6.1v.4c-.4.2-.2.4-.1.5s.5.4.4.7c-.1.5.1 1 .5 1.3v.2c.1.7 1.1 1.3 1.2 2 .1.5 1 1 2.3.9 1.1-.1 1.5-.5 2.5-.7.2 0 .8-.1 1-.1 4.2-.3 8.5-.6 12.7-1 1.2-.1 2.6-.1 3.7-.3 1.5-.3 3.1-.3 4.6-.5 2.9-.3 5.8-.5 8.6-.5 2.4 0 4.8-.3 7.2-.4 1.3-.1 2.7.1 4-.1.5-.1 1-.1 1.6-.1 1.4.1 13.7-.1 15.1-.1 2.8 0 5.6-.1 8.4-.2 3.3-.1 17.4-.2 20.7 0 1.1 0 2.3.2 3.4.2 3.1-.2 6.2.1 9.3.2 2.7.1 5.4.3 8.1.4s5.2.2 7.8.5c1 .1 2.1.2 3.1.3.8.1 1.4-.2 2.2-.1 2 .3 4.1.5 6.2.6 1.1 0 2.2.1 3.2.3 1.6.3 3.1.5 4.7.7l1 .4c.9.4 1.8.5 2.8.3.5-.3.8-1 .6-1.6v-.2c.1-.2.2-.3.1-.5.3-.1.3-.2.2-.4.2-.6.7-1.1.4-1.7-.1-.2-.4-.6.4-.8v-.5c-.4 0-.4-.2-.5-.3-.2-.5-.1-1-.1-1.5zM78.3 45.3h-.2.2"></path></clipPath> <path clip-path="url(#mask)" fill-rule="evenodd" fill="none" stroke="#9D8D6C" stroke-width="13" d="M-1.1 49.4s50.4-6.3 81.9-6 77.1 4.6 77.1 4.6" class="Logo-streak animateLogo-streak"></path></svg></a></footer></div></div></div>
86<script>window.__NUXT__={layout:"default",data:[{}],error:null,state:{minWidth:360,minFontSize:18,minScale:1.2,maxWidth:1240,maxFontSize:20,maxScale:1.25,positiveSteps:5,negativeSteps:2,viewports:[],minCustom:!1,maxCustom:!1,viewport:0,negativeSizes:[.75,.5,.25],positiveSizes:[1.5,2,3,4,6],customSizes:["s-l"],minGridGutter:"s",maxGridGutter:"l",maxGridColumn:"xl",maxGridColumnCount:12},serverRendered:!0}</script>
86<script src="/_nuxt/e9415bcd97915c778bef.js" defer></script>
86<script src="/_nuxt/32efede8da7c3969ccf1.js" defer></script>
86<script src="/_nuxt/fecd7d419df778ccfddf.js" defer></script>
86<script src="/_nuxt/eb63641842b11c68bd67.js" defer></script>
86<script src="/_nuxt/b58ffb6d88ca51f936e2.js" defer></script>
86
87  </body>
88</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.