{"id":3619,"date":"2025-11-03T14:23:36","date_gmt":"2025-11-03T14:23:36","guid":{"rendered":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-3\/"},"modified":"2025-11-03T14:23:36","modified_gmt":"2025-11-03T14:23:36","slug":"pure-css-tabs-details-grid-subgrid-3","status":"publish","type":"post","link":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-3\/","title":{"rendered":"Pure CSS Tabs With Details, Grid, and Subgrid"},"content":{"rendered":"<article>\n<h2>Introduction<\/h2>\n<p>Creating a user-friendly interface is essential in web development, and tabs are a popular way to organize content without overwhelming users. In this guide, we will explore how to create pure CSS tabs using the <strong>details<\/strong> element, along with <strong>grid<\/strong> and <strong>subgrid<\/strong> layouts. This method not only simplifies your HTML but also enhances responsiveness and accessibility.<\/p>\n<h2>What You Will Learn<\/h2>\n<ul>\n<li>Understanding the <code>details<\/code> element<\/li>\n<li>Utilizing CSS Grid for layout<\/li>\n<li>Implementing subgrid for nested tabs<\/li>\n<li>Best practices for styling<\/li>\n<\/ul>\n<h2>Step 1: Setting Up Your HTML Structure<\/h2>\n<p>First, we need to create the basic structure for our tabs. The <code>details<\/code> element helps us create collapsible content easily. Here&#8217;s a simple HTML template:<\/p>\n<pre><code>&lt;div class=&quot;tabs&quot;&gt;\n  &lt;details&gt;\n    &lt;summary&gt;Tab 1&lt;\/summary&gt;\n    &lt;div class=&quot;tab-content&quot;&gt;\n      &lt;p&gt;Content for Tab 1&lt;\/p&gt;\n    &lt;\/div&gt;\n  &lt;\/details&gt;\n  &lt;details&gt;\n    &lt;summary&gt;Tab 2&lt;\/summary&gt;\n    &lt;div class=&quot;tab-content&quot;&gt;\n      &lt;p&gt;Content for Tab 2&lt;\/p&gt;\n    &lt;\/div&gt;\n  &lt;\/details&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<h2>Step 2: Styling with CSS Grid<\/h2>\n<p>Now that we have our HTML structure, it&#8217;s time to style it using CSS Grid. This allows us to create a responsive layout effortlessly:<\/p>\n<pre><code>.tabs {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  gap: 10px;\n}\n\ndetails {\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  padding: 10px;\n  background: #f9f9f9;\n}\n\ndetails[open] {\n  background: #e0f7fa;\n}\n\ntab-content {\n  padding: 20px;\n  background: #fff;\n  border: 1px solid #ddd;\n}\n<\/code><\/pre>\n<h2>Step 3: Using Subgrid for Nested Tabs<\/h2>\n<p>To make our tabs even more dynamic, we can implement a subgrid for nested content. Here&#8217;s how you can achieve this:<\/p>\n<pre><code>&lt;div class=&quot;nested-tabs&quot;&gt;\n  &lt;details&gt;\n    &lt;summary&gt;Nested Tab 1&lt;\/summary&gt;\n    &lt;div class=&quot;tab-inner-content&quot;&gt;\n      &lt;details&gt;\n        &lt;summary&gt;Sub Tab 1.1&lt;\/summary&gt;\n        &lt;p&gt;Content for Sub Tab 1.1&lt;\/p&gt;\n      &lt;\/details&gt;\n      &lt;details&gt;\n        &lt;summary&gt;Sub Tab 1.2&lt;\/summary&gt;\n        &lt;p&gt;Content for Sub Tab 1.2&lt;\/p&gt;\n      &lt;\/details&gt;\n    &lt;\/div&gt;\n  &lt;\/details&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>And the accompanying CSS:<\/p>\n<pre><code>.nested-tabs {\n  display: subgrid;\n}\n<\/code><\/pre>\n<h2>Step 4: Best Practices for Accessibility<\/h2>\n<p>When creating tabs, accessibility is crucial. Utilize the <code>aria-expanded<\/code> attribute to indicate whether the tab is open or closed. Additionally, ensure that your tabs are navigable using keyboard shortcuts.<\/p>\n<h2>FAQs<\/h2>\n<h3>Can I use CSS-only tabs in all browsers?<\/h3>\n<p>Most modern browsers support the <code>details<\/code> element, but it&#8217;s always good to check compatibility on platforms like <a href=\"https:\/\/caniuse.com\/\">Can I use<\/a>.<\/p>\n<h3>How do I style the <code>summary<\/code> element?<\/h3>\n<p>You can style the <code>summary<\/code> element like any other HTML element using CSS. Consider using <code>list-style: none;<\/code> for a cleaner look.<\/p>\n<h3>Are there any tools to help with CSS optimization?<\/h3>\n<p>Absolutely! You can use the <a href=\"https:\/\/webtoolslab.io\/tools\/css-minifier.php\">CSS Minifier<\/a> from WebToolsLab to optimize your CSS files.<\/p>\n<h2>Conclusion<\/h2>\n<p>Creating pure CSS tabs with details, grid, and subgrid not only enhances the user experience but also keeps your code clean and maintainable. By following the steps outlined in this guide, you can build responsive and accessible tabs for your web projects. For more tools to aid your web development process, visit <a href=\"https:\/\/webtoolslab.io\/\">WebToolsLab<\/a>.<\/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":2871,"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-3619","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 With 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-3\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pure CSS Tabs With 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-3\/\" \/>\n<meta property=\"og:site_name\" content=\"WebToolsLab\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-03T14:23:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245801133.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-3\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-3\\\/\"},\"author\":{\"name\":\"maashraf\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"headline\":\"Pure CSS Tabs With Details, Grid, and Subgrid\",\"datePublished\":\"2025-11-03T14:23:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-3\\\/\"},\"wordCount\":342,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-3\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245801133.webp\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-3\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-3\\\/\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-3\\\/\",\"name\":\"Pure CSS Tabs With Details, Grid, and Subgrid - WebToolsLab\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-3\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-3\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245801133.webp\",\"datePublished\":\"2025-11-03T14:23:36+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-3\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-3\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-3\\\/#primaryimage\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245801133.webp\",\"contentUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245801133.webp\",\"width\":1820,\"height\":1024,\"caption\":\"1752245801133\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-3\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Pure CSS Tabs With 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 With 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-3\/","og_locale":"en_US","og_type":"article","og_title":"Pure CSS Tabs With 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-3\/","og_site_name":"WebToolsLab","article_published_time":"2025-11-03T14:23:36+00:00","og_image":[{"width":1820,"height":1024,"url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245801133.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-3\/#article","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-3\/"},"author":{"name":"maashraf","@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"headline":"Pure CSS Tabs With Details, Grid, and Subgrid","datePublished":"2025-11-03T14:23:36+00:00","mainEntityOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-3\/"},"wordCount":342,"commentCount":0,"publisher":{"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-3\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245801133.webp","articleSection":["Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-3\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-3\/","url":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-3\/","name":"Pure CSS Tabs With Details, Grid, and Subgrid - WebToolsLab","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-3\/#primaryimage"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-3\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245801133.webp","datePublished":"2025-11-03T14:23:36+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-3\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-3\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-3\/#primaryimage","url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245801133.webp","contentUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245801133.webp","width":1820,"height":1024,"caption":"1752245801133"},{"@type":"BreadcrumbList","@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webtoolslab.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Pure CSS Tabs With 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\/1752245801133.webp","uagb_featured_image_src":{"full":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245801133.webp",1820,1024,false],"thumbnail":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245801133-150x150.webp",150,150,true],"medium":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245801133-300x169.webp",300,169,true],"medium_large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245801133-768x432.webp",768,432,true],"large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245801133-1024x576.webp",1024,576,true],"1536x1536":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245801133-1536x864.webp",1536,864,true],"2048x2048":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245801133.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\/3619","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=3619"}],"version-history":[{"count":0,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3619\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media\/2871"}],"wp:attachment":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media?parent=3619"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/categories?post=3619"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/tags?post=3619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}