{"id":3674,"date":"2025-11-10T20:31:40","date_gmt":"2025-11-10T20:31:40","guid":{"rendered":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-7\/"},"modified":"2025-11-10T20:31:40","modified_gmt":"2025-11-10T20:31:40","slug":"pure-css-tabs-details-grid-subgrid-7","status":"publish","type":"post","link":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-7\/","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 for any web application. One effective way to organize content is through tabs. In this guide, we&#8217;ll explore how to create pure CSS tabs utilizing the <strong>details<\/strong> element, <strong>CSS Grid<\/strong>, and <strong>Subgrid<\/strong> features. This approach is not only efficient but also enhances accessibility and performance.<\/p>\n<h2>What You Will Learn<\/h2>\n<ul>\n<li>Understanding the <code>&lt;details&gt;<\/code> element<\/li>\n<li>Creating a tabbed interface with CSS Grid<\/li>\n<li>Implementing Subgrid for nested layouts<\/li>\n<li>Best practices for styling tabs<\/li>\n<\/ul>\n<h2>Prerequisites<\/h2>\n<p>Before diving in, make sure you have a basic understanding of CSS and HTML. You can also use the <a href=\"https:\/\/webtoolslab.io\/tools\/css-minifier.php\">CSS Minifier<\/a> to optimize your stylesheets.<\/p>\n<h2>Step 1: Basic HTML Structure<\/h2>\n<p>To get started, we need a simple HTML structure. Below is an example of how to set up your tabbed interface using the <code>&lt;details&gt;<\/code> element.<\/p>\n<pre><code>&lt;div class=\"tabs\"&gt;\n    &lt;details&gt;\n        &lt;summary&gt;Tab 1&lt;\/summary&gt;\n        &lt;div class=\"content\"&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=\"content\"&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>Next, we will style our tabs using CSS Grid. This allows us to create a responsive layout that adjusts according to the viewport size.<\/p>\n<pre><code>.tabs {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 1rem;\n}\n\n.content {\n    border: 1px solid #ccc;\n    padding: 1rem;\n    display: none;\n}\n\ndetails[open] .content {\n    display: block;\n}<\/code><\/pre>\n<h2>Step 3: Utilizing CSS Subgrid<\/h2>\n<p>Now let&#8217;s implement Subgrid for a nested layout within our tabs. Subgrid allows child elements to align with their parent grid, creating a more cohesive design.<\/p>\n<pre><code>.content {\n    display: grid;\n    grid-template-columns: subgrid;\n}<\/code><\/pre>\n<h2>Step 4: Final Enhancements<\/h2>\n<p>Finally, we can enhance the appearance of our tabs with some additional CSS. Make sure to style the <code>&lt;summary&gt;<\/code> element for a better user experience.<\/p>\n<pre><code>summary {\n    background-color: #f0f0f0;\n    cursor: pointer;\n    padding: 0.5rem;\n    border-radius: 4px;\n}\n\nsummary:hover {\n    background-color: #e0e0e0;\n}<\/code><\/pre>\n<h2>FAQs<\/h2>\n<h3>Can I use JavaScript with CSS tabs?<\/h3>\n<p>Yes, while this tutorial focuses on pure CSS, you can enhance functionality with JavaScript if needed.<\/p>\n<h3>How do I ensure accessibility for my tabs?<\/h3>\n<p>Using the <code>&lt;details&gt;<\/code> element inherently improves accessibility, as it\u2019s a semantic HTML element. Ensure to add proper ARIA roles if you customize it further.<\/p>\n<h3>Are there 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> or <a href=\"https:\/\/webtoolslab.io\/tools\/html-minifier.php\">HTML Minifier<\/a> to optimize your code.<\/p>\n<h2>Conclusion<\/h2>\n<p>Creating pure CSS tabs using the <code>&lt;details&gt;<\/code> element alongside CSS Grid and Subgrid is a powerful way to enhance your web applications. Not only does it offer a clean and organized layout, but it also improves accessibility and performance. Feel free to experiment with these techniques and enhance your UI further. For more tools and resources, check out the <a href=\"https:\/\/webtoolslab.io\/\">WebToolsLab<\/a>.<\/p>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to create pure CSS tabs using the details, grid, and subgrid features for an optimal UI experience.<\/p>\n","protected":false},"author":1,"featured_media":2875,"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-3674","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 the details, grid, and subgrid features for an optimal UI experience.\" \/>\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-7\/\" \/>\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 the details, grid, and subgrid features for an optimal UI experience.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-7\/\" \/>\n<meta property=\"og:site_name\" content=\"WebToolsLab\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-10T20:31:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245607672.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=\"2 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-7\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-7\\\/\"},\"author\":{\"name\":\"maashraf\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"headline\":\"Pure CSS Tabs with Details, Grid, and Subgrid\",\"datePublished\":\"2025-11-10T20:31:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-7\\\/\"},\"wordCount\":364,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-7\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245607672.webp\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-7\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-7\\\/\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-7\\\/\",\"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-7\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-7\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245607672.webp\",\"datePublished\":\"2025-11-10T20:31:40+00:00\",\"description\":\"Learn how to create pure CSS tabs using the details, grid, and subgrid features for an optimal UI experience.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-7\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-7\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-7\\\/#primaryimage\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245607672.webp\",\"contentUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245607672.webp\",\"width\":1820,\"height\":1024,\"caption\":\"Illustration showing JavaScript file before and after minification\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-7\\\/#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 the details, grid, and subgrid features for an optimal UI experience.","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-7\/","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 the details, grid, and subgrid features for an optimal UI experience.","og_url":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-7\/","og_site_name":"WebToolsLab","article_published_time":"2025-11-10T20:31:40+00:00","og_image":[{"width":1820,"height":1024,"url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245607672.webp","type":"image\/webp"}],"author":"maashraf","twitter_card":"summary_large_image","twitter_misc":{"Written by":"maashraf","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-7\/#article","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-7\/"},"author":{"name":"maashraf","@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"headline":"Pure CSS Tabs with Details, Grid, and Subgrid","datePublished":"2025-11-10T20:31:40+00:00","mainEntityOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-7\/"},"wordCount":364,"commentCount":0,"publisher":{"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-7\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245607672.webp","articleSection":["Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-7\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-7\/","url":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-7\/","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-7\/#primaryimage"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-7\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245607672.webp","datePublished":"2025-11-10T20:31:40+00:00","description":"Learn how to create pure CSS tabs using the details, grid, and subgrid features for an optimal UI experience.","breadcrumb":{"@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-7\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-7\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-7\/#primaryimage","url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245607672.webp","contentUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245607672.webp","width":1820,"height":1024,"caption":"Illustration showing JavaScript file before and after minification"},{"@type":"BreadcrumbList","@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-7\/#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\/1752245607672.webp","uagb_featured_image_src":{"full":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245607672.webp",1820,1024,false],"thumbnail":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245607672-150x150.webp",150,150,true],"medium":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245607672-300x169.webp",300,169,true],"medium_large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245607672-768x432.webp",768,432,true],"large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245607672-1024x576.webp",1024,576,true],"1536x1536":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245607672-1536x864.webp",1536,864,true],"2048x2048":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245607672.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 the details, grid, and subgrid features for an optimal UI experience.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3674","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=3674"}],"version-history":[{"count":0,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3674\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media\/2875"}],"wp:attachment":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media?parent=3674"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/categories?post=3674"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/tags?post=3674"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}