[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"post-css-container-queries-layout-revolution":3,"parsed-post-3994ccef-79e8-46db-9d0d-98586ed97c1f":81,"header-categories":370},{"success":4,"data":5},true,{"id":6,"slug":7,"title":8,"excerpt":9,"content":10,"status":11,"visibility":12,"featuredImage":13,"canonicalUrl":14,"readingTime":15,"viewCount":16,"commentEnabled":4,"publishedAt":17,"scheduledAt":14,"createdAt":18,"updatedAt":19,"seoTitle":20,"seoDescription":9,"seoKeywords":14,"authorId":21,"author":22,"coAuthors":27,"tags":28,"categories":39,"comments":48,"_count":49,"relatedPosts":51},"3994ccef-79e8-46db-9d0d-98586ed97c1f","css-container-queries-layout-revolution","CSS Container Queries: The Layout Revolution","Forget media queries for components. Container queries let components respond to their own size, enabling truly reusable layouts.","## The Problem with Media Queries\n\nMedia queries respond to the **viewport** size. But components don't live in the viewport — they live in containers that can be any size.\n\nA card component in a sidebar needs different styles than the same card in the main content area. Media queries can't solve this.\n\n## Container Queries to the Rescue\n\n```css\n\u002F* Define a containment context *\u002F\n.card-container {\n  container-type: inline-size;\n  container-name: card;\n}\n\n\u002F* Style based on container width *\u002F\n@container card (min-width: 400px) {\n  .card {\n    display: grid;\n    grid-template-columns: 200px 1fr;\n  }\n}\n\n@container card (max-width: 399px) {\n  .card {\n    display: flex;\n    flex-direction: column;\n  }\n}\n```\n\n## With Tailwind CSS\n\nTailwind v3.4+ supports container queries natively:\n\n```html\n\u003Cdiv class=\"@container\">\n  \u003Cdiv class=\"flex flex-col @md:flex-row @lg:grid @lg:grid-cols-3 gap-4\">\n    \u003Cimg class=\"w-full @md:w-48 rounded\" src=\"...\" alt=\"...\" \u002F>\n    \u003Cdiv class=\"@md:flex-1\">\n      \u003Ch3 class=\"text-lg @lg:text-xl font-bold\">Card Title\u003C\u002Fh3>\n      \u003Cp class=\"text-sm @lg:text-base text-gray-600\">Description...\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\n::callout{icon=\"i-lucide-box\" color=\"success\"}\nThe `@container` class creates a containment context. Then use `@sm:`, `@md:`, `@lg:` prefixes instead of `sm:`, `md:`, `lg:` to query the container instead of the viewport.\n::\n\n## Real-World Example: Responsive Card\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv class=\"@container\">\n    \u003Carticle class=\"\n      flex flex-col gap-3\n      @sm:flex-row @sm:gap-4\n      @md:gap-6\n      bg-white dark:bg-gray-800 rounded-xl p-4 @md:p-6\n    \">\n      \u003Cimg\n        :src=\"post.image\"\n        class=\"rounded-lg w-full @sm:w-32 @md:w-48 aspect-video object-cover\"\n      \u002F>\n      \u003Cdiv class=\"flex-1 min-w-0\">\n        \u003Ch3 class=\"font-semibold text-base @md:text-lg truncate\">\n          {{ post.title }}\n        \u003C\u002Fh3>\n        \u003Cp class=\"hidden @sm:block text-sm text-gray-500 line-clamp-2\">\n          {{ post.excerpt }}\n        \u003C\u002Fp>\n      \u003C\u002Fdiv>\n    \u003C\u002Farticle>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n```\n\n## Browser Support\n\nContainer queries are supported in all modern browsers (Chrome 105+, Firefox 110+, Safari 16+). For older browsers, the component falls back to the mobile\u002Fdefault layout — a perfectly graceful degradation.\n\n## When to Use Container vs Media Queries\n\n| Use Case | Container Query | Media Query |\n|----------|:-:|:-:|\n| Reusable component layouts | ✅ | ❌ |\n| Page-level layout shifts | ❌ | ✅ |\n| Sidebar vs main content | ✅ | ❌ |\n| Navigation responsive behavior | ❌ | ✅ |\n\nContainer queries make components truly portable. Use them everywhere a component might appear in different-sized containers.\n","published","public","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1516116216624-53e697fedbea?w=1200&q=80",null,8,1238,"2026-06-27T06:03:18.451Z","2026-07-24T06:03:18.454Z","2026-07-28T17:11:22.604Z","CSS Container Queries: The Layout Revolution | BitBlog","fddb5d93-7a2c-4d86-a06a-fa32e73a01c6",{"email":23,"bio":24,"id":21,"name":25,"avatarUrl":26},"mbeahessilfieprince@gmail.com","Fullstack Software Developer ","Mbeah Essilfie","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F93322394?v=4",[],[29,34],{"id":30,"name":31,"color":32,"description":33},"css","CSS","#1572b6","Cascading Style Sheets",{"id":35,"name":36,"color":37,"description":38},"tailwind","Tailwind CSS","#06b6d4","Utility-first CSS framework",[40,44],{"id":41,"name":42,"description":43},"web-development","Web Development","Frontend and backend web development tutorials and guides",{"id":45,"name":46,"description":47},"tutorials","Tutorials","Step-by-step learning guides",[],{"comments":50},0,[52,61,71],{"id":53,"slug":54,"title":55,"excerpt":56,"featuredImage":57,"viewCount":58,"readingTime":15,"publishedAt":59,"author":60},"2997028f-4d22-4eb7-9d86-894a54cb559a","building-type-safe-apis-nuxt3-prisma","Building Type-Safe APIs with Nuxt 3 and Prisma","Learn how to build end-to-end type-safe APIs using Nuxt 3 server routes and Prisma ORM for a seamless developer experience.","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1498050108023-c5249f4df085?w=1200&q=80",1922,"2026-07-23T06:02:46.910Z",{"id":21,"name":25,"avatarUrl":26},{"id":62,"slug":63,"title":64,"excerpt":65,"featuredImage":66,"viewCount":67,"readingTime":68,"publishedAt":69,"author":70},"da9e4553-8b0d-411e-b4ec-f9684017e163","mastering-tailwind-css-design-systems","Mastering Tailwind CSS: From Utility Classes to Design Systems","Go beyond basic utility classes and learn how to build cohesive, maintainable design systems with Tailwind CSS.","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1555066931-4365d14bab8c?w=1200&q=80",257,10,"2026-07-21T06:02:49.268Z",{"id":21,"name":25,"avatarUrl":26},{"id":72,"slug":73,"title":74,"excerpt":75,"featuredImage":76,"viewCount":77,"readingTime":78,"publishedAt":79,"author":80},"50add5fc-4026-4267-b917-7f71ea9e35b0","complete-guide-vue3-composables","The Complete Guide to Vue 3 Composables","Understand the power of Vue 3's Composition API through practical, real-world composable patterns that you can use today.","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1517694712202-14dd9538aa97?w=1200&q=80",990,12,"2026-07-19T06:02:51.753Z",{"id":21,"name":25,"avatarUrl":26},{"data":82,"body":84,"toc":361},{"title":83,"description":83},"",{"type":85,"children":86},"root",[87,96,110,115,121,133,139,144,154,218,224,234,240,245,251,351,356],{"type":88,"tag":89,"props":90,"children":92},"element","h2",{"id":91},"the-problem-with-media-queries",[93],{"type":94,"value":95},"text","The Problem with Media Queries",{"type":88,"tag":97,"props":98,"children":99},"p",{},[100,102,108],{"type":94,"value":101},"Media queries respond to the ",{"type":88,"tag":103,"props":104,"children":105},"strong",{},[106],{"type":94,"value":107},"viewport",{"type":94,"value":109}," size. But components don't live in the viewport — they live in containers that can be any size.",{"type":88,"tag":97,"props":111,"children":112},{},[113],{"type":94,"value":114},"A card component in a sidebar needs different styles than the same card in the main content area. Media queries can't solve this.",{"type":88,"tag":89,"props":116,"children":118},{"id":117},"container-queries-to-the-rescue",[119],{"type":94,"value":120},"Container Queries to the Rescue",{"type":88,"tag":122,"props":123,"children":127},"pre",{"className":124,"code":125,"language":30,"meta":83,"style":126},"language-css","\u002F* Define a containment context *\u002F\n.card-container {\n  container-type: inline-size;\n  container-name: card;\n}\n\n\u002F* Style based on container width *\u002F\n@container card (min-width: 400px) {\n  .card {\n    display: grid;\n    grid-template-columns: 200px 1fr;\n  }\n}\n\n@container card (max-width: 399px) {\n  .card {\n    display: flex;\n    flex-direction: column;\n  }\n}\n","undefined",[128],{"type":88,"tag":129,"props":130,"children":131},"code",{"__ignoreMap":83},[132],{"type":94,"value":125},{"type":88,"tag":89,"props":134,"children":136},{"id":135},"with-tailwind-css",[137],{"type":94,"value":138},"With Tailwind CSS",{"type":88,"tag":97,"props":140,"children":141},{},[142],{"type":94,"value":143},"Tailwind v3.4+ supports container queries natively:",{"type":88,"tag":122,"props":145,"children":149},{"className":146,"code":147,"language":148,"meta":83,"style":126},"language-html","\u003Cdiv class=\"@container\">\n  \u003Cdiv class=\"flex flex-col @md:flex-row @lg:grid @lg:grid-cols-3 gap-4\">\n    \u003Cimg class=\"w-full @md:w-48 rounded\" src=\"...\" alt=\"...\" \u002F>\n    \u003Cdiv class=\"@md:flex-1\">\n      \u003Ch3 class=\"text-lg @lg:text-xl font-bold\">Card Title\u003C\u002Fh3>\n      \u003Cp class=\"text-sm @lg:text-base text-gray-600\">Description...\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n","html",[150],{"type":88,"tag":129,"props":151,"children":152},{"__ignoreMap":83},[153],{"type":94,"value":147},{"type":88,"tag":155,"props":156,"children":159},"callout",{"color":157,"icon":158},"success","i-lucide-box",[160],{"type":88,"tag":97,"props":161,"children":162},{},[163,165,171,173,179,181,187,188,194,196,202,203,209,210,216],{"type":94,"value":164},"The ",{"type":88,"tag":129,"props":166,"children":168},{"className":167},[],[169],{"type":94,"value":170},"@container",{"type":94,"value":172}," class creates a containment context. Then use ",{"type":88,"tag":129,"props":174,"children":176},{"className":175},[],[177],{"type":94,"value":178},"@sm:",{"type":94,"value":180},", ",{"type":88,"tag":129,"props":182,"children":184},{"className":183},[],[185],{"type":94,"value":186},"@md:",{"type":94,"value":180},{"type":88,"tag":129,"props":189,"children":191},{"className":190},[],[192],{"type":94,"value":193},"@lg:",{"type":94,"value":195}," prefixes instead of ",{"type":88,"tag":129,"props":197,"children":199},{"className":198},[],[200],{"type":94,"value":201},"sm:",{"type":94,"value":180},{"type":88,"tag":129,"props":204,"children":206},{"className":205},[],[207],{"type":94,"value":208},"md:",{"type":94,"value":180},{"type":88,"tag":129,"props":211,"children":213},{"className":212},[],[214],{"type":94,"value":215},"lg:",{"type":94,"value":217}," to query the container instead of the viewport.",{"type":88,"tag":89,"props":219,"children":221},{"id":220},"real-world-example-responsive-card",[222],{"type":94,"value":223},"Real-World Example: Responsive Card",{"type":88,"tag":122,"props":225,"children":229},{"className":226,"code":227,"language":228,"meta":83,"style":126},"language-vue","\u003Ctemplate>\n  \u003Cdiv class=\"@container\">\n    \u003Carticle class=\"\n      flex flex-col gap-3\n      @sm:flex-row @sm:gap-4\n      @md:gap-6\n      bg-white dark:bg-gray-800 rounded-xl p-4 @md:p-6\n    \">\n      \u003Cimg\n        :src=\"post.image\"\n        class=\"rounded-lg w-full @sm:w-32 @md:w-48 aspect-video object-cover\"\n      \u002F>\n      \u003Cdiv class=\"flex-1 min-w-0\">\n        \u003Ch3 class=\"font-semibold text-base @md:text-lg truncate\">\n          {{ post.title }}\n        \u003C\u002Fh3>\n        \u003Cp class=\"hidden @sm:block text-sm text-gray-500 line-clamp-2\">\n          {{ post.excerpt }}\n        \u003C\u002Fp>\n      \u003C\u002Fdiv>\n    \u003C\u002Farticle>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue",[230],{"type":88,"tag":129,"props":231,"children":232},{"__ignoreMap":83},[233],{"type":94,"value":227},{"type":88,"tag":89,"props":235,"children":237},{"id":236},"browser-support",[238],{"type":94,"value":239},"Browser Support",{"type":88,"tag":97,"props":241,"children":242},{},[243],{"type":94,"value":244},"Container queries are supported in all modern browsers (Chrome 105+, Firefox 110+, Safari 16+). For older browsers, the component falls back to the mobile\u002Fdefault layout — a perfectly graceful degradation.",{"type":88,"tag":89,"props":246,"children":248},{"id":247},"when-to-use-container-vs-media-queries",[249],{"type":94,"value":250},"When to Use Container vs Media Queries",{"type":88,"tag":252,"props":253,"children":254},"table",{},[255,280],{"type":88,"tag":256,"props":257,"children":258},"thead",{},[259],{"type":88,"tag":260,"props":261,"children":262},"tr",{},[263,269,275],{"type":88,"tag":264,"props":265,"children":266},"th",{},[267],{"type":94,"value":268},"Use Case",{"type":88,"tag":264,"props":270,"children":272},{"align":271},"center",[273],{"type":94,"value":274},"Container Query",{"type":88,"tag":264,"props":276,"children":277},{"align":271},[278],{"type":94,"value":279},"Media Query",{"type":88,"tag":281,"props":282,"children":283},"tbody",{},[284,303,319,335],{"type":88,"tag":260,"props":285,"children":286},{},[287,293,298],{"type":88,"tag":288,"props":289,"children":290},"td",{},[291],{"type":94,"value":292},"Reusable component layouts",{"type":88,"tag":288,"props":294,"children":295},{"align":271},[296],{"type":94,"value":297},"✅",{"type":88,"tag":288,"props":299,"children":300},{"align":271},[301],{"type":94,"value":302},"❌",{"type":88,"tag":260,"props":304,"children":305},{},[306,311,315],{"type":88,"tag":288,"props":307,"children":308},{},[309],{"type":94,"value":310},"Page-level layout shifts",{"type":88,"tag":288,"props":312,"children":313},{"align":271},[314],{"type":94,"value":302},{"type":88,"tag":288,"props":316,"children":317},{"align":271},[318],{"type":94,"value":297},{"type":88,"tag":260,"props":320,"children":321},{},[322,327,331],{"type":88,"tag":288,"props":323,"children":324},{},[325],{"type":94,"value":326},"Sidebar vs main content",{"type":88,"tag":288,"props":328,"children":329},{"align":271},[330],{"type":94,"value":297},{"type":88,"tag":288,"props":332,"children":333},{"align":271},[334],{"type":94,"value":302},{"type":88,"tag":260,"props":336,"children":337},{},[338,343,347],{"type":88,"tag":288,"props":339,"children":340},{},[341],{"type":94,"value":342},"Navigation responsive behavior",{"type":88,"tag":288,"props":344,"children":345},{"align":271},[346],{"type":94,"value":302},{"type":88,"tag":288,"props":348,"children":349},{"align":271},[350],{"type":94,"value":297},{"type":88,"tag":97,"props":352,"children":353},{},[354],{"type":94,"value":355},"Container queries make components truly portable. Use them everywhere a component might appear in different-sized containers.",{"type":88,"tag":357,"props":358,"children":359},"style",{},[360],{"type":94,"value":83},{"title":83,"searchDepth":362,"depth":362,"links":363},2,[364,365,366,367,368,369],{"id":91,"depth":362,"text":95},{"id":117,"depth":362,"text":120},{"id":135,"depth":362,"text":138},{"id":220,"depth":362,"text":223},{"id":236,"depth":362,"text":239},{"id":247,"depth":362,"text":250},{"success":4,"data":371},{"items":372,"pagination":429},[373,381,389,397,405,410,418,425],{"id":374,"name":375,"description":376,"parentId":14,"createdAt":377,"updatedAt":377,"parent":14,"children":378,"_count":379},"ai-future","AI & The Future","Artificial intelligence and emerging technology","2026-07-24T06:02:45.990Z",[],{"posts":380},1,{"id":382,"name":383,"description":384,"parentId":14,"createdAt":385,"updatedAt":385,"parent":14,"children":386,"_count":387},"tools-productivity","Tools & Productivity","Developer tools and workflow optimization","2026-07-24T06:02:45.712Z",[],{"posts":388},7,{"id":390,"name":391,"description":392,"parentId":14,"createdAt":393,"updatedAt":393,"parent":14,"children":394,"_count":395},"career","Career & Growth","Professional development for developers","2026-07-24T06:02:45.486Z",[],{"posts":396},3,{"id":398,"name":399,"description":400,"parentId":14,"createdAt":401,"updatedAt":401,"parent":14,"children":402,"_count":403},"opinion","Opinion & Analysis","Industry analysis and technical opinions","2026-07-24T06:02:45.272Z",[],{"posts":404},6,{"id":45,"name":46,"description":47,"parentId":14,"createdAt":406,"updatedAt":406,"parent":14,"children":407,"_count":408},"2026-07-24T06:02:44.965Z",[],{"posts":409},21,{"id":411,"name":412,"description":413,"parentId":14,"createdAt":414,"updatedAt":414,"parent":14,"children":415,"_count":416},"software-engineering","Software Engineering","Best practices, patterns, and principles","2026-07-24T06:02:44.689Z",[],{"posts":417},24,{"id":419,"name":420,"description":421,"parentId":14,"createdAt":422,"updatedAt":422,"parent":14,"children":423,"_count":424},"devops-cloud","DevOps & Cloud","Infrastructure, deployment, and cloud computing","2026-07-24T06:02:44.453Z",[],{"posts":404},{"id":41,"name":42,"description":43,"parentId":14,"createdAt":426,"updatedAt":426,"parent":14,"children":427,"_count":428},"2026-07-24T06:02:44.169Z",[],{"posts":417},{"page":380,"limit":15,"total":15,"totalPages":380,"hasNext":430,"hasPrev":430},false]