.grid-container{display:grid;grid-template-columns:minmax(200px,1fr) 1fr 1fr;gap:12px;padding:12px;background-color:#fff;border:2px dashed #cbd5e1;border-radius:12px;box-shadow:0 10px 25px rgb(0 0 0 / .05);box-sizing:border-box;margin-bottom:30px!important;max-width:100%}.animated{animation:shrinkGrow 5s infinite alternate ease-in-out;margin:0 auto}@keyframes shrinkGrow{0%,10%{width:100%}90%,100%{width:320px}}.grid-container.length-demo{grid-template-columns:minmax(100px,200px) 1fr 1fr}.length-demo.length-animated{animation:lengthShrinkGrow 5s infinite alternate ease-in-out;margin:0 auto}@keyframes lengthShrinkGrow{0%,10%{width:100%}90%,100%{width:320px}}.interactive{width:100%;resize:horizontal;overflow:hidden;padding-bottom:25px}.box{height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:6px;font-size:15px;color:#1e293b;text-align:center;padding:10px;box-sizing:border-box;overflow:hidden;white-space:nowrap;transition:background-color 0.2s}.box.yellow{background-color:#fde047}.box.grey{background-color:#e2e8f0}.px-label{font-family:monospace;font-size:13px;margin-top:8px;color:#475569;background:rgb(255 255 255 / .5);padding:2px 8px;border-radius:4px}.grid-container.percentage-demo{grid-template-columns:minmax(200px,50%) 1fr 1fr}.percentage-demo.percentage-animated{animation:percentageShrinkGrow 5s infinite alternate ease-in-out;margin:0 auto}@keyframes percentageShrinkGrow{0%,10%{width:100%}90%,100%{width:420px}}.grid-container.max-content-demo{grid-template-columns:minmax(max-content,max-content) 1fr 1fr}.max-content-demo.max-content-animated{animation:maxContentShrinkGrow 5s infinite alternate ease-in-out;margin:0 auto}.max-content-demo .box.yellow{white-space:nowrap}@keyframes maxContentShrinkGrow{0%,10%{width:100%}90%,100%{width:400px}}.grid-container.min-content-demo{grid-template-columns:minmax(min-content,min-content) 1fr 1fr}.min-content-demo.min-content-animated{animation:minContentShrinkGrow 5s infinite alternate ease-in-out;margin:0 auto}.min-content-demo .box.yellow{white-space:nowrap}@keyframes minContentShrinkGrow{0%,10%{width:100%}90%,100%{width:350px}}.grid-container.auto-demo{grid-template-columns:minmax(auto,auto) 1fr 1fr}.auto-demo.auto-animated{animation:autoShrinkGrow 5s infinite alternate ease-in-out;margin:0 auto}@keyframes autoShrinkGrow{0%,10%{width:100%}90%,100%{width:400px}}.grid-container.responsive-demo{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-template-rows:auto;min-height:300px}.responsive-demo.responsive-animated{animation:responsiveShrinkGrow 8s infinite alternate ease-in-out;margin:0 auto}.responsive-demo .box{min-height:80px;height:auto}@keyframes responsiveShrinkGrow{0%,10%{width:100%}90%,100%{width:450px}}