{"id":3624,"date":"2025-11-04T08:14:46","date_gmt":"2025-11-04T08:14:46","guid":{"rendered":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-4\/"},"modified":"2025-11-04T08:14:46","modified_gmt":"2025-11-04T08:14:46","slug":"pure-css-tabs-details-grid-subgrid-4","status":"publish","type":"post","link":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-4\/","title":{"rendered":"Pure CSS Tabs: Details, Grid, and Subgrid"},"content":{"rendered":"<article>\n<h2>Introduction<\/h2>\n<p>Creating interactive tabs is a common requirement in web development. Traditionally, JavaScript has been the go-to solution for this task. However, with advancements in CSS, you can now create pure CSS tabs that are both lightweight and easy to implement. In this guide, we&#8217;ll dive into creating pure CSS tabs with details, grid, and subgrid layouts.<\/p>\n<h2>Understanding CSS Grid and Subgrid<\/h2>\n<p>Before we start building our tabs, it\u2019s important to understand the concepts of CSS Grid and Subgrid:<\/p>\n<ul>\n<li><strong>CSS Grid:<\/strong> A layout system that allows you to create complex web layouts with rows and columns.<\/li>\n<li><strong>CSS Subgrid:<\/strong> An extension of the CSS Grid, allowing nested grids to inherit the grid definition from their parent.<\/li>\n<\/ul>\n<h2>Step-by-Step Guide to Create Pure CSS Tabs<\/h2>\n<p>Now that we have a basic understanding of CSS Grid and Subgrid, let\u2019s create our pure CSS tabs.<\/p>\n<h3>Step 1: Setting Up HTML Structure<\/h3>\n<pre><code>&lt;div class=&quot;tabs&quot;&gt;\n    &lt;input type=&quot;radio&quot; id=&quot;tab1&quot; name=&quot;tab&quot; checked&gt;\n    &lt;label for=&quot;tab1&quot;&gt;Tab 1&lt;\/label&gt;\n    &lt;div class=&quot;content&quot;&gt;\n        &lt;p&gt;Content for Tab 1&lt;\/p&gt;\n    &lt;\/div&gt;\n\n    &lt;input type=&quot;radio&quot; id=&quot;tab2&quot; name=&quot;tab&quot;&gt;\n    &lt;label for=&quot;tab2&quot;&gt;Tab 2&lt;\/label&gt;\n    &lt;div class=&quot;content&quot;&gt;\n        &lt;p&gt;Content for Tab 2&lt;\/p&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<h3>Step 2: Adding CSS Styles<\/h3>\n<p>Next, we\u2019ll add the CSS styles to style the tabs and their contents.<\/p>\n<pre><code>.tabs {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n}\n\n.tabs label {\n    cursor: pointer;\n    padding: 10px;\n    background: #f0f0f0;\n    text-align: center;\n}\n\n.tabs .content {\n    display: none;\n}\n\ninput[type=&quot;radio&quot;]:checked + label + .content {\n    display: block;\n}<\/code><\/pre>\n<h3>Step 3: Implementing Subgrid<\/h3>\n<p>To enhance our layout, let\u2019s use CSS Subgrid for the content. This allows us to maintain a coherent structure with nested grids.<\/p>\n<pre><code>.content {\n    display: grid;\n    grid-template-columns: subgrid;\n}\n\n.content p {\n    grid-column: 1 \/ -1;\n}<\/code><\/pre>\n<h2>Example Output<\/h2>\n<p>After implementing the above code, you should see two tabs with their respective contents displayed when clicked. This layout is flexible and can be easily adapted to more tabs or different content types.<\/p>\n<h2>FAQs<\/h2>\n<h3>Can I add more tabs easily?<\/h3>\n<p>Yes! Simply copy and paste the input and label elements, and adjust the IDs accordingly.<\/p>\n<h3>Is this solution SEO-friendly?<\/h3>\n<p>Absolutely! As the content is in the HTML structure and rendered on the page, search engines can index it without any JavaScript dependencies.<\/p>\n<h3>What if I want to style the tabs differently?<\/h3>\n<p>You can customize the CSS styles as per your design requirements. Use tools like the <a href=\"https:\/\/webtoolslab.io\/tools\/css-minifier.php\">CSS Minifier<\/a> to clean up your styles.<\/p>\n<h2>Conclusion<\/h2>\n<p>Creating pure CSS tabs using details, grid, and subgrid is an efficient way to enhance the user experience on your website. Not only is this technique lightweight, but it also ensures that your content is accessible and SEO-friendly. For further enhancements, consider using tools from <a href=\"https:\/\/webtoolslab.io\/\">WebToolsLab<\/a> to optimize your code and improve performance.<\/p>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to create pure CSS tabs using details, grid, and subgrid layouts. Step-by-step guide with code examples included.<\/p>\n","protected":false},"author":1,"featured_media":2855,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[21],"tags":[],"class_list":["post-3624","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Pure CSS Tabs: Details, Grid, and Subgrid - WebToolsLab<\/title>\n<meta name=\"description\" content=\"Learn how to create pure CSS tabs using details, grid, and subgrid layouts. Step-by-step guide with code examples included.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-4\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pure CSS Tabs: Details, Grid, and Subgrid - WebToolsLab\" \/>\n<meta property=\"og:description\" content=\"Learn how to create pure CSS tabs using details, grid, and subgrid layouts. Step-by-step guide with code examples included.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-4\/\" \/>\n<meta property=\"og:site_name\" content=\"WebToolsLab\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-04T08:14:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246148790.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1820\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"maashraf\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"maashraf\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-4\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-4\\\/\"},\"author\":{\"name\":\"maashraf\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"headline\":\"Pure CSS Tabs: Details, Grid, and Subgrid\",\"datePublished\":\"2025-11-04T08:14:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-4\\\/\"},\"wordCount\":368,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-4\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752246148790.webp\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-4\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-4\\\/\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-4\\\/\",\"name\":\"Pure CSS Tabs: Details, Grid, and Subgrid - WebToolsLab\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-4\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-4\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752246148790.webp\",\"datePublished\":\"2025-11-04T08:14:46+00:00\",\"description\":\"Learn how to create pure CSS tabs using details, grid, and subgrid layouts. Step-by-step guide with code examples included.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-4\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-4\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-4\\\/#primaryimage\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752246148790.webp\",\"contentUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752246148790.webp\",\"width\":1820,\"height\":1024,\"caption\":\"1752246148790\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-4\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Pure CSS Tabs: Details, Grid, and Subgrid\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/\",\"name\":\"WebToolsLab Free Online Developer Tools\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\",\"name\":\"maashraf\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon-1.png\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon-1.png\",\"contentUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon-1.png\",\"width\":96,\"height\":96,\"caption\":\"maashraf\"},\"logo\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon-1.png\"},\"sameAs\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\"],\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/author\\\/maashraf\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Pure CSS Tabs: Details, Grid, and Subgrid - WebToolsLab","description":"Learn how to create pure CSS tabs using details, grid, and subgrid layouts. Step-by-step guide with code examples included.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-4\/","og_locale":"en_US","og_type":"article","og_title":"Pure CSS Tabs: Details, Grid, and Subgrid - WebToolsLab","og_description":"Learn how to create pure CSS tabs using details, grid, and subgrid layouts. Step-by-step guide with code examples included.","og_url":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-4\/","og_site_name":"WebToolsLab","article_published_time":"2025-11-04T08:14:46+00:00","og_image":[{"width":1820,"height":1024,"url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246148790.webp","type":"image\/webp"}],"author":"maashraf","twitter_card":"summary_large_image","twitter_misc":{"Written by":"maashraf","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-4\/#article","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-4\/"},"author":{"name":"maashraf","@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"headline":"Pure CSS Tabs: Details, Grid, and Subgrid","datePublished":"2025-11-04T08:14:46+00:00","mainEntityOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-4\/"},"wordCount":368,"commentCount":0,"publisher":{"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-4\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246148790.webp","articleSection":["Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-4\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-4\/","url":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-4\/","name":"Pure CSS Tabs: Details, Grid, and Subgrid - WebToolsLab","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-4\/#primaryimage"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-4\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246148790.webp","datePublished":"2025-11-04T08:14:46+00:00","description":"Learn how to create pure CSS tabs using details, grid, and subgrid layouts. Step-by-step guide with code examples included.","breadcrumb":{"@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-4\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-4\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-4\/#primaryimage","url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246148790.webp","contentUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246148790.webp","width":1820,"height":1024,"caption":"1752246148790"},{"@type":"BreadcrumbList","@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-4\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webtoolslab.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Pure CSS Tabs: Details, Grid, and Subgrid"}]},{"@type":"WebSite","@id":"https:\/\/webtoolslab.io\/blog\/#website","url":"https:\/\/webtoolslab.io\/blog\/","name":"WebToolsLab Free Online Developer Tools","description":"","publisher":{"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webtoolslab.io\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb","name":"maashraf","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/favicon-1.png","url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/favicon-1.png","contentUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/favicon-1.png","width":96,"height":96,"caption":"maashraf"},"logo":{"@id":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/favicon-1.png"},"sameAs":["https:\/\/webtoolslab.io\/blog"],"url":"https:\/\/webtoolslab.io\/blog\/author\/maashraf\/"}]}},"jetpack_featured_media_url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246148790.webp","uagb_featured_image_src":{"full":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246148790.webp",1820,1024,false],"thumbnail":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246148790-150x150.webp",150,150,true],"medium":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246148790-300x169.webp",300,169,true],"medium_large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246148790-768x432.webp",768,432,true],"large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246148790-1024x576.webp",1024,576,true],"1536x1536":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246148790-1536x864.webp",1536,864,true],"2048x2048":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246148790.webp",1820,1024,false]},"uagb_author_info":{"display_name":"maashraf","author_link":"https:\/\/webtoolslab.io\/blog\/author\/maashraf\/"},"uagb_comment_info":0,"uagb_excerpt":"Learn how to create pure CSS tabs using details, grid, and subgrid layouts. Step-by-step guide with code examples included.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3624","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/comments?post=3624"}],"version-history":[{"count":0,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3624\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media\/2855"}],"wp:attachment":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media?parent=3624"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/categories?post=3624"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/tags?post=3624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}