[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"verticals":3,"article-container-queries-responsive-primitive":32,"code:css:true:1btyjfh":199,"code:css:true:8t8jhj":200,"code:css:true:17baxvk":201},[4,20],{"id":5,"slug":6,"name":7,"tagline":8,"description":9,"accentFrom":10,"accentTo":11,"icon":12,"defaultLocale":13,"locales":14,"features":16,"position":19},"019fe637-3d33-714b-b57f-23e163ffca0c","dev","Web Development","Build. Learn. Ship.","Practical courses, engineering-grade articles and open-source tools for people who ship.","violet-500","cyan-400","◇","en",[13,15],"fa",{"courses":17,"paths":17,"articles":17,"exams":18,"flashcards":18,"packages":17,"community":17,"certificates":17,"teams":17,"commerce":17},true,false,0,{"id":21,"slug":22,"name":23,"tagline":24,"description":25,"accentFrom":26,"accentTo":10,"icon":27,"defaultLocale":13,"locales":28,"features":30,"position":31},"019fe637-3dc2-754c-8657-0f175bfee7c6","lang","Languages","Learn a language the way you learn a codebase.","Structured paths, listening drills and spaced repetition that actually sticks.","amber-400","⌘",[13,15,29],"es",{"courses":17,"paths":17,"articles":18,"exams":18,"flashcards":18,"packages":18,"community":17,"certificates":18,"teams":18,"commerce":17},2,{"id":33,"slug":34,"title":35,"subtitle":36,"excerpt":37,"coverUrl":38,"locale":13,"readingMinutes":39,"publishedAt":40,"viewCount":41,"likeCount":19,"commentCount":19,"author":42,"vertical":47,"topic":48,"tags":51,"_count":63,"playground":36,"body":64,"bodyMd":189,"seo":190,"translationGroupId":193,"thread":194,"assessments":196,"translations":197,"quiz":36},"019fe65f-c193-7159-96ba-bff62b34e53d","container-queries-responsive-primitive","Your card breaks in the sidebar. Here's the real fix.",null,"A component that looks perfect in the main column falls apart in a sidebar — and the viewport width says everything's fine. The bug isn't your CSS. It's the question your CSS is asking.","\u002Fmedia\u002Fcovers\u002Fcontainer-queries-responsive-primitive.png",4,"2026-06-30T07:30:01.218Z",3,{"id":43,"name":44,"username":45,"avatarUrl":36,"headline":46},"019fe637-3c25-7088-9034-39c9f15dc3c8","Parsa Jiravand","parsa","Frontend engineer · building bestpractic",{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":49,"name":50},"css","CSS",[52,54,57,60],{"slug":49,"name":53,"color":36},"Css",{"slug":55,"name":56,"color":36},"webdev","Webdev",{"slug":58,"name":59,"color":36},"frontend","Frontend",{"slug":61,"name":62,"color":36},"javascript","Javascript",{"assessments":19},{"blocks":65,"version":188},[66,70,73,76,79,84,87,90,93,98,101,104,107,110,113,117,120,123,126,129,133,136,140,143,149,152,156,159,162,165,168,171,174,177,180],{"id":67,"html":68,"type":69},"b1","\u003Cp>You built a card. Image, title, a line of copy. In the main content column it's gorgeous — image left, text right, everything breathing.\u003C\u002Fp>","paragraph",{"id":71,"html":72,"type":69},"b2","\u003Cp>Then someone drops it into the sidebar.\u003C\u002Fp>",{"id":74,"html":75,"type":69},"b3","\u003Cp>Now the image is squashed next to three words per line, the title wraps four times, and the whole thing looks broken. You open DevTools, check your breakpoints, and they're all firing correctly. The viewport \u003Cem>is\u003C\u002Fem> wide. So why does your card look like it's having a stroke?\u003C\u002Fp>",{"id":77,"html":78,"type":69},"b4","\u003Cp>Here's the punchline up front: the bug isn't in your CSS. It's in the question your CSS is allowed to ask. And the fix is one line.\u003C\u002Fp>",{"id":80,"html":81,"text":82,"type":83,"level":31},"b5","The question media queries can't answer","The question media queries can't answer","heading",{"id":85,"html":86,"type":69},"b6","\u003Cp>For fifteen years, the only responsive question we could ask was "how wide is the window?" That's what a media query is. Resize the viewport, cross a breakpoint, restyle.\u003C\u002Fp>",{"id":88,"html":89,"type":69},"b7","\u003Cp>Which works fine — right up until you build a component meant to live in more than one place.\u003C\u002Fp>",{"id":91,"html":92,"type":69},"b8","\u003Cp>Your card doesn't care how wide the \u003Cem>window\u003C\u002Fem> is. It cares how wide \u003Cem>it\u003C\u002Fem> is. And those two numbers have nothing to do with each other. A 1400px desktop can hand your card a 220px sidebar. The media query sees "1400px — go wide!" and lays out side-by-side in a slot that's narrower than the image.\u003C\u002Fp>",{"id":94,"code":95,"type":96,"language":49,"highlight":97},"b9","\u002F* The card asks the window. The window has no idea where the card is. *\u002F\n@media (min-width: 600px) {\n  .card { grid-template-columns: 200px 1fr; }\n}","code",[],{"id":99,"html":100,"type":69},"b10","\u003Cp>Quick gut check before you scroll: how have you solved this before? Be honest.\u003C\u002Fp>",{"id":102,"html":103,"type":69},"b11","\u003Cp>If you're like most of us, the answer is one of three hacks: a \u003Ccode>compact\u003C\u002Fcode> prop threaded down through five components, a \u003Ccode>ResizeObserver\u003C\u002Fcode> wired up in JavaScript, or two near-identical card variants you swap by hand. I've shipped all three. They're all workarounds for the same missing primitive — a way for a component to ask \u003Cem>its own container\u003C\u002Fem>, not the window, how much room it's got.\u003C\u002Fp>",{"id":105,"html":106,"text":106,"type":83,"level":31},"b12","One declaration changes the question",{"id":108,"html":109,"type":69},"b13","\u003Cp>That primitive shipped. It's called a container query, and it's in every major browser — Chrome, Firefox, Safari, Edge — no flag, no polyfill.\u003C\u002Fp>",{"id":111,"html":112,"type":69},"b14","\u003Cp>You do two things. Mark a parent as a container. Query \u003Cem>that\u003C\u002Fem> instead of the viewport.\u003C\u002Fp>",{"id":114,"code":115,"type":96,"language":49,"highlight":116},"b15","\u002F* 1. Tell the parent it's a query container *\u002F\n.card-wrapper {\n  container-type: inline-size;\n}\n\n\u002F* 2. The compact default — image on top *\u002F\n.card {\n  display: grid;\n  grid-template-rows: auto 1fr;\n}\n\n\u002F* 3. Go side-by-side only when MY container has the room *\u002F\n@container (min-width: 500px) {\n  .card {\n    grid-template-columns: 200px 1fr;\n    grid-template-rows: unset;\n  }\n}",[],{"id":118,"html":119,"type":69},"b16","\u003Cp>Read that \u003Ccode>@container\u003C\u002Fcode> line out loud: "when \u003Cem>my container\u003C\u002Fem> is at least 500px, go wide." Not the window. The container.\u003C\u002Fp>",{"id":121,"html":122,"type":69},"b17","\u003Cp>Now drop the exact same card into the 220px sidebar and it stays stacked, because its container is 220px. Drop it into the wide grid and it opens up. One component, two layouts, zero JavaScript, zero props. The card finally knows where it lives.\u003C\u002Fp>",{"id":124,"html":125,"text":125,"type":83,"level":31},"b18","When the layout nests, name the container",{"id":127,"html":128,"type":69},"b19","\u003Cp>Sometimes the thing you want to respond to isn't the immediate parent — it's a layout region three levels up. Name your containers and query the one you mean:\u003C\u002Fp>",{"id":130,"code":131,"type":96,"language":49,"highlight":132},"b20",".sidebar { container-type: inline-size; container-name: sidebar; }\n.main    { container-type: inline-size; container-name: main; }\n\n\u002F* This title responds to the sidebar specifically *\u002F\n@container sidebar (min-width: 300px) {\n  .card-title { font-size: 1.25rem; }\n}",[],{"id":134,"html":135,"type":69},"b21","\u003Cp>The old way to make a deeply nested element aware of a high-level region was a \u003Ccode>ResizeObserver\u003C\u002Fcode>, a React context, and a prop-drilling session. Here it's two declarations. That's the whole feature.\u003C\u002Fp>",{"id":137,"html":138,"text":139,"type":83,"level":31},"b22","So is \u003Ccode>@media\u003C\u002Fcode> dead? No — and here's the line","So is @media dead? No — and here's the line",{"id":141,"html":142,"type":69},"b23","\u003Cp>This is the part people get wrong: container queries don't replace media queries. They have different jobs, and mixing them up is its own mess.\u003C\u002Fp>",{"id":144,"type":145,"items":146,"ordered":18},"b24","list",[147,148],"\u003Cstrong>Media query\u003C\u002Fstrong> → page-level structure. One column vs. two. Collapsing the nav. A full-bleed hero. Anything that genuinely answers to the \u003Cem>viewport\u003C\u002Fem> — including print and \u003Ccode>prefers-reduced-motion\u003C\u002Fcode>.","\u003Cstrong>Container query\u003C\u002Fstrong> → anything reusable that gets dropped into varying space. Cards, tables, form fields, media objects.",{"id":150,"html":151,"type":69},"b25","\u003Cp>The heuristic that's never failed me: \u003Cstrong>the layout skeleton is a media query; everything you hang on it is a container query.\u003C\u002Fstrong>\u003C\u002Fp>",{"id":153,"html":154,"text":155,"type":83,"level":31},"b26","The bonus you'll notice in Storybook","The bonus you'll notice in Storybook",{"id":157,"html":158,"type":69},"b27","\u003Cp>Here's a side effect I didn't expect. Build a card with media queries inside it and your Storybook preview \u003Cem>lies\u003C\u002Fem> — it shows the component at the story frame's viewport width, not the width it'll get in production. The preview looks fine; the real layout breaks.\u003C\u002Fp>",{"id":160,"html":161,"type":69},"b28","\u003Cp>Swap to container queries and the preview tells the truth. Resize the story panel and the card adapts, because "context" now lives in the CSS instead of being inferred from the window. What you see in isolation is what you ship.\u003C\u002Fp>",{"id":163,"html":164,"text":164,"type":83,"level":31},"b29","The fix was one line — and a better question",{"id":166,"html":167,"type":69},"b30","\u003Cp>Remember the broken sidebar card? \u003Ccode>container-type: inline-size\u003C\u002Fcode> on its wrapper. That's it. The layout you already wrote starts working the moment the card can see its own container instead of guessing from the window.\u003C\u002Fp>",{"id":169,"html":170,"type":69},"b31","\u003Cp>The takeaway you can repeat to a teammate tomorrow: \u003Cstrong>stop asking "how wide is the window?" and start asking "how wide am I?"\u003C\u002Fstrong> Once the question changes, the component designs itself.\u003C\u002Fp>",{"id":172,"html":173,"type":69},"b32","\u003Cp>So — how many \u003Ccode>compact\u003C\u002Fcode> props are still threaded through your codebase right now? Go count. I bet most of them want to be a single \u003Ccode>@container\u003C\u002Fcode> rule. Tell me what you find in the comments.\u003C\u002Fp>",{"id":175,"type":176},"b33","divider",{"id":178,"html":179,"type":69},"b34","\u003Cp>\u003Cem>Thanks for reading! Let's stay connected:\u003C\u002Fem>\u003C\u002Fp>",{"id":181,"type":145,"items":182,"ordered":18},"b35",[183,184,185,186,187],"⭐ \u003Cstrong>GitHub\u003C\u002Fstrong> — follow me and star the projects: \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fparsajiravand\">github.com\u002Fparsajiravand\u003C\u002Fa>","💬 \u003Cstrong>Discord\u003C\u002Fstrong> — join the frontend best-practices community: \u003Ca href=\"https:\u002F\u002Fdiscord.gg\u002Fd9KRhuAwQ\">discord.gg\u002Fd9KRhuAwQ\u003C\u002Fa>","📸 \u003Cstrong>Instagram\u003C\u002Fstrong> — frontend best practices, daily: \u003Ca href=\"https:\u002F\u002Fwww.instagram.com\u002Fbestpractice___\u002F\">@bestpractice___\u003C\u002Fa>","💼 \u003Cstrong>LinkedIn\u003C\u002Fstrong> — \u003Ca href=\"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fparsa-jiravand\u002F\">linkedin.com\u002Fin\u002Fparsa-jiravand\u003C\u002Fa>","✉️ \u003Cstrong>Email\u003C\u002Fstrong> (work & contract inquiries): \u003Ca href=\"mailto:bestpractice2026@gmail.com\">bestpractice2026@gmail.com\u003C\u002Fa>",1,"You built a card. Image, title, a line of copy. In the main content column it's gorgeous — image left, text right, everything breathing.\n\nThen someone drops it into the sidebar.\n\nNow the image is squashed next to three words per line, the title wraps four times, and the whole thing looks broken. You open DevTools, check your breakpoints, and they're all firing correctly. The viewport *is* wide. So why does your card look like it's having a stroke?\n\nHere's the punchline up front: the bug isn't in your CSS. It's in the question your CSS is allowed to ask. And the fix is one line.\n\n## The question media queries can't answer\n\nFor fifteen years, the only responsive question we could ask was \"how wide is the window?\" That's what a media query is. Resize the viewport, cross a breakpoint, restyle.\n\nWhich works fine — right up until you build a component meant to live in more than one place.\n\nYour card doesn't care how wide the *window* is. It cares how wide *it* is. And those two numbers have nothing to do with each other. A 1400px desktop can hand your card a 220px sidebar. The media query sees \"1400px — go wide!\" and lays out side-by-side in a slot that's narrower than the image.\n\n```css\n\u002F* The card asks the window. The window has no idea where the card is. *\u002F\n@media (min-width: 600px) {\n  .card { grid-template-columns: 200px 1fr; }\n}\n```\n\nQuick gut check before you scroll: how have you solved this before? Be honest.\n\nIf you're like most of us, the answer is one of three hacks: a `compact` prop threaded down through five components, a `ResizeObserver` wired up in JavaScript, or two near-identical card variants you swap by hand. I've shipped all three. They're all workarounds for the same missing primitive — a way for a component to ask *its own container*, not the window, how much room it's got.\n\n## One declaration changes the question\n\nThat primitive shipped. It's called a container query, and it's in every major browser — Chrome, Firefox, Safari, Edge — no flag, no polyfill.\n\nYou do two things. Mark a parent as a container. Query *that* instead of the viewport.\n\n```css\n\u002F* 1. Tell the parent it's a query container *\u002F\n.card-wrapper {\n  container-type: inline-size;\n}\n\n\u002F* 2. The compact default — image on top *\u002F\n.card {\n  display: grid;\n  grid-template-rows: auto 1fr;\n}\n\n\u002F* 3. Go side-by-side only when MY container has the room *\u002F\n@container (min-width: 500px) {\n  .card {\n    grid-template-columns: 200px 1fr;\n    grid-template-rows: unset;\n  }\n}\n```\n\nRead that `@container` line out loud: \"when *my container* is at least 500px, go wide.\" Not the window. The container.\n\nNow drop the exact same card into the 220px sidebar and it stays stacked, because its container is 220px. Drop it into the wide grid and it opens up. One component, two layouts, zero JavaScript, zero props. The card finally knows where it lives.\n\n## When the layout nests, name the container\n\nSometimes the thing you want to respond to isn't the immediate parent — it's a layout region three levels up. Name your containers and query the one you mean:\n\n```css\n.sidebar { container-type: inline-size; container-name: sidebar; }\n.main    { container-type: inline-size; container-name: main; }\n\n\u002F* This title responds to the sidebar specifically *\u002F\n@container sidebar (min-width: 300px) {\n  .card-title { font-size: 1.25rem; }\n}\n```\n\nThe old way to make a deeply nested element aware of a high-level region was a `ResizeObserver`, a React context, and a prop-drilling session. Here it's two declarations. That's the whole feature.\n\n## So is `@media` dead? No — and here's the line\n\nThis is the part people get wrong: container queries don't replace media queries. They have different jobs, and mixing them up is its own mess.\n\n- **Media query** → page-level structure. One column vs. two. Collapsing the nav. A full-bleed hero. Anything that genuinely answers to the *viewport* — including print and `prefers-reduced-motion`.\n- **Container query** → anything reusable that gets dropped into varying space. Cards, tables, form fields, media objects.\n\nThe heuristic that's never failed me: **the layout skeleton is a media query; everything you hang on it is a container query.**\n\n## The bonus you'll notice in Storybook\n\nHere's a side effect I didn't expect. Build a card with media queries inside it and your Storybook preview *lies* — it shows the component at the story frame's viewport width, not the width it'll get in production. The preview looks fine; the real layout breaks.\n\nSwap to container queries and the preview tells the truth. Resize the story panel and the card adapts, because \"context\" now lives in the CSS instead of being inferred from the window. What you see in isolation is what you ship.\n\n## The fix was one line — and a better question\n\nRemember the broken sidebar card? `container-type: inline-size` on its wrapper. That's it. The layout you already wrote starts working the moment the card can see its own container instead of guessing from the window.\n\nThe takeaway you can repeat to a teammate tomorrow: **stop asking \"how wide is the window?\" and start asking \"how wide am I?\"** Once the question changes, the component designs itself.\n\nSo — how many `compact` props are still threaded through your codebase right now? Go count. I bet most of them want to be a single `@container` rule. Tell me what you find in the comments.\n\n---\n\n*Thanks for reading! Let's stay connected:*\n\n- ⭐ **GitHub** — follow me and star the projects: [github.com\u002Fparsajiravand](https:\u002F\u002Fgithub.com\u002Fparsajiravand)\n- 💬 **Discord** — join the frontend best-practices community: [discord.gg\u002Fd9KRhuAwQ](https:\u002F\u002Fdiscord.gg\u002Fd9KRhuAwQ)\n- 📸 **Instagram** — frontend best practices, daily: [@bestpractice___](https:\u002F\u002Fwww.instagram.com\u002Fbestpractice___\u002F)\n- 💼 **LinkedIn** — [linkedin.com\u002Fin\u002Fparsa-jiravand](https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fparsa-jiravand\u002F)\n- ✉️ **Email** (work & contract inquiries): [bestpractice2026@gmail.com](mailto:bestpractice2026@gmail.com)",{"title":35,"canonical":191,"description":192},"https:\u002F\u002Fbestpractic.org\u002Fblog\u002Fcontainer-queries-responsive-primitive","A component that looks perfect in the main column falls apart in a sidebar — and the viewport width says everything's fine. The bug isn't your CSS. It's the question your CSS is as","019fe65f-c193-7159-96ba-c1770e820eef",{"id":195,"locked":18},"019fe65f-c8a4-72ae-a98d-63f599bcb48a",[],[198],{"locale":13,"slug":34},"\u003Cdiv class=\"shj shj-lang-css shj-multiline\" data-lang=\"css\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-cmnt\">\u002F* The card asks the window. The window has no idea where the card is. *\u002F\u003C\u002Fspan>\n\u003Cspan class=\"shj-kwd\">@media\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">min-width\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">600\u003C\u002Fspan>\u003Cspan class=\"shj-var\">px\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">.card\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan> \u003Cspan class=\"shj-var\">grid-template-columns\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">200\u003C\u002Fspan>\u003Cspan class=\"shj-var\">px\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan> \u003Cspan class=\"shj-num\">1\u003C\u002Fspan>fr; \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-css shj-multiline\" data-lang=\"css\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003Cdiv>7\u003C\u002Fdiv>\u003Cdiv>8\u003C\u002Fdiv>\u003Cdiv>9\u003C\u002Fdiv>\u003Cdiv>10\u003C\u002Fdiv>\u003Cdiv>11\u003C\u002Fdiv>\u003Cdiv>12\u003C\u002Fdiv>\u003Cdiv>13\u003C\u002Fdiv>\u003Cdiv>14\u003C\u002Fdiv>\u003Cdiv>15\u003C\u002Fdiv>\u003Cdiv>16\u003C\u002Fdiv>\u003Cdiv>17\u003C\u002Fdiv>\u003Cdiv>18\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-cmnt\">\u002F* 1. Tell the parent it's a query container *\u002F\u003C\u002Fspan>\n\u003Cspan class=\"shj-var\">.card-wrapper\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">container-type\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">inline-size\u003C\u002Fspan>;\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\n\u003Cspan class=\"shj-cmnt\">\u002F* 2. The compact default — image on top *\u002F\u003C\u002Fspan>\n\u003Cspan class=\"shj-var\">.card\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">display\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">grid\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-var\">grid-template-rows\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">auto\u003C\u002Fspan> \u003Cspan class=\"shj-num\">1\u003C\u002Fspan>fr;\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\n\u003Cspan class=\"shj-cmnt\">\u002F* 3. Go side-by-side only when MY container has the room *\u002F\u003C\u002Fspan>\n\u003Cspan class=\"shj-kwd\">@container\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">min-width\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">500\u003C\u002Fspan>\u003Cspan class=\"shj-var\">px\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">.card\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n    \u003Cspan class=\"shj-var\">grid-template-columns\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">200\u003C\u002Fspan>\u003Cspan class=\"shj-var\">px\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan> \u003Cspan class=\"shj-num\">1\u003C\u002Fspan>fr;\n    \u003Cspan class=\"shj-var\">grid-template-rows\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">unset\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-css shj-multiline\" data-lang=\"css\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003Cdiv>7\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-var\">.sidebar\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan> \u003Cspan class=\"shj-var\">container-type\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">inline-size\u003C\u002Fspan>; \u003Cspan class=\"shj-var\">container-name\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">sidebar\u003C\u002Fspan>; \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\u003Cspan class=\"shj-var\">.main\u003C\u002Fspan>    \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan> \u003Cspan class=\"shj-var\">container-type\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">inline-size\u003C\u002Fspan>; \u003Cspan class=\"shj-var\">container-name\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">main\u003C\u002Fspan>; \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\n\u003Cspan class=\"shj-cmnt\">\u002F* This title responds to the sidebar specifically *\u002F\u003C\u002Fspan>\n\u003Cspan class=\"shj-kwd\">@container\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">sidebar\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">min-width\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">300\u003C\u002Fspan>\u003Cspan class=\"shj-var\">px\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">.card-title\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan> \u003Cspan class=\"shj-var\">font-size\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">1.25\u003C\u002Fspan>\u003Cspan class=\"shj-var\">rem\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>; \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>"]