{"id":3628,"date":"2025-11-04T20:30:25","date_gmt":"2025-11-04T20:30:25","guid":{"rendered":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-5\/"},"modified":"2025-11-04T20:30:25","modified_gmt":"2025-11-04T20:30:25","slug":"pure-css-tabs-details-grid-subgrid-5","status":"publish","type":"post","link":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-5\/","title":{"rendered":"Pure CSS Tabs With Details, Grid, and Subgrid"},"content":{"rendered":"<article>\n<h2>Introduction<\/h2>\n<p>Creating interactive tabs is a common requirement in web design, and you can achieve this using only CSS without relying on JavaScript. In this article, we will explore how to create pure CSS tabs using the <strong>grid<\/strong> and <strong>subgrid<\/strong> layouts. These techniques not only streamline your code but also enhance the maintainability of your styles.<\/p>\n<h2>What Are CSS Tabs?<\/h2>\n<p>CSS tabs are a user interface element that allows users to switch between different sections of content without leaving the page. They are typically represented as clickable headers that reveal associated content when activated. The challenge is to create these tabs in a way that remains responsive and aesthetically pleasing.<\/p>\n<h2>Benefits of Using Pure CSS Tabs<\/h2>\n<ul>\n<li><strong>No JavaScript Dependency:<\/strong> Eliminates the need for scripts, making your page lighter and faster.<\/li>\n<li><strong>Accessibility:<\/strong> CSS-only solutions can be more accessible for screen readers.<\/li>\n<li><strong>Ease of Maintenance:<\/strong> Cleaner code is easier to maintain and modify.<\/li>\n<\/ul>\n<h2>Step-by-Step Guide to Creating Pure CSS Tabs<\/h2>\n<h3>1. Setting Up Your HTML Structure<\/h3>\n<pre><code>&lt;div class=&quot;tabs&quot;&gt;\n    &lt;input type=&quot;radio&quot; name=&quot;tab&quot; id=&quot;tab1&quot; checked&gt;\n    &lt;label for=&quot;tab1&quot;&gt;Tab 1&lt;\/label&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\n    &lt;input type=&quot;radio&quot; name=&quot;tab&quot; id=&quot;tab2&quot;&gt;\n    &lt;label for=&quot;tab2&quot;&gt;Tab 2&lt;\/label&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;\/div&gt;<\/code><\/pre>\n<h3>2. Styling the Tabs with CSS<\/h3>\n<pre><code>.tabs {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    border: 1px solid #ccc;\n}\n\n.tab-content {\n    display: none;\n}\n\ninput[type=&quot;radio&quot;]:checked + label + .tab-content {\n    display: block;\n}\n<\/code><\/pre>\n<h3>3. Implementing Grid and Subgrid<\/h3>\n<p>Using CSS grid and subgrid allows for better alignment of tab contents. Here\u2019s how to apply them:<\/p>\n<pre><code>.tabs {\n    display: grid;\n    grid-template-columns: 1fr;\n}\n\n.tab-content {\n    display: grid;\n    grid-template-rows: auto;\n    grid-template-columns: subgrid;\n}\n<\/code><\/pre>\n<h3>4. Enhancing Aesthetics<\/h3>\n<p>Now, let\u2019s make our tabs more visually appealing:<\/p>\n<pre><code>label {\n    background: #f1f1f1;\n    padding: 10px;\n    cursor: pointer;\n}\n\ninput[type=&quot;radio&quot;]:checked + label {\n    background: #fff;\n    border-bottom: 1px solid white;\n}\n<\/code><\/pre>\n<h2>Code Example<\/h2>\n<p>Here is a complete example of a pure CSS tab layout:<\/p>\n<pre><code>&lt;style&gt;\n.tabs {\n    display: grid;\n    grid-template-columns: 1fr;\n}\n\n.tab-content {\n    display: none;\n}\n\ninput[type=&quot;radio&quot;]:checked + label + .tab-content {\n    display: block;\n}\n\nlabel {\n    background: #f1f1f1;\n    padding: 10px;\n    cursor: pointer;\n}\n\ninput[type=&quot;radio&quot;]:checked + label {\n    background: #fff;\n    border-bottom: 1px solid white;\n}\n&lt;\/style&gt;\n\n&lt;div class=&quot;tabs&quot;&gt;\n    &lt;input type=&quot;radio&quot; name=&quot;tab&quot; id=&quot;tab1&quot; checked&gt;\n    &lt;label for=&quot;tab1&quot;&gt;Tab 1&lt;\/label&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\n    &lt;input type=&quot;radio&quot; name=&quot;tab&quot; id=&quot;tab2&quot;&gt;\n    &lt;label for=&quot;tab2&quot;&gt;Tab 2&lt;\/label&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;\/div&gt;<\/code><\/pre>\n<h2>FAQs<\/h2>\n<h3>Can these tabs be made responsive?<\/h3>\n<p>Yes, using CSS grid provides flexibility, allowing you to modify the layout at different breakpoints easily.<\/p>\n<h3>Is it possible to style the tabs further?<\/h3>\n<p>Absolutely! You can add hover effects, transitions, and even animations to enhance user experience.<\/p>\n<h2>Conclusion<\/h2>\n<p>Creating pure CSS tabs with grid and subgrid layouts not only simplifies your code but also elevates the user experience without the need for JavaScript. By following the steps outlined in this guide, you can implement beautiful tabs in your web projects. For further enhancement, consider using tools like the <a href=\"https:\/\/webtoolslab.io\/tools\/css-minifier.php\">CSS Minifier<\/a> to optimize your styles and ensure faster load times.<\/p>\n<p>For more tools and resources to enhance your web development projects, check out <a href=\"https:\/\/webtoolslab.io\/\">WebToolsLab (All Tools)<\/a>.<\/p>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to create pure CSS tabs with details using grid and subgrid layouts. Step-by-step guide with code examples.<\/p>\n","protected":false},"author":1,"featured_media":2877,"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-3628","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 with details using grid and subgrid layouts. Step-by-step guide with code examples.\" \/>\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-5\/\" \/>\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 with details using grid and subgrid layouts. Step-by-step guide with code examples.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-5\/\" \/>\n<meta property=\"og:site_name\" content=\"WebToolsLab\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-04T20:30:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245569912.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-5\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-5\\\/\"},\"author\":{\"name\":\"maashraf\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"headline\":\"Pure CSS Tabs With Details, Grid, and Subgrid\",\"datePublished\":\"2025-11-04T20:30:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-5\\\/\"},\"wordCount\":345,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-5\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245569912.webp\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-5\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-5\\\/\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-5\\\/\",\"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-5\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-5\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245569912.webp\",\"datePublished\":\"2025-11-04T20:30:25+00:00\",\"description\":\"Learn how to create pure CSS tabs with details using grid and subgrid layouts. Step-by-step guide with code examples.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-5\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-5\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-5\\\/#primaryimage\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245569912.webp\",\"contentUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245569912.webp\",\"width\":1820,\"height\":1024,\"caption\":\"Top 5 online CSS minifier tools for developers reviewed\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid-5\\\/#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 with details using grid and subgrid layouts. Step-by-step guide with code examples.","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-5\/","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 with details using grid and subgrid layouts. Step-by-step guide with code examples.","og_url":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-5\/","og_site_name":"WebToolsLab","article_published_time":"2025-11-04T20:30:25+00:00","og_image":[{"width":1820,"height":1024,"url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245569912.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-5\/#article","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-5\/"},"author":{"name":"maashraf","@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"headline":"Pure CSS Tabs With Details, Grid, and Subgrid","datePublished":"2025-11-04T20:30:25+00:00","mainEntityOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-5\/"},"wordCount":345,"commentCount":0,"publisher":{"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-5\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245569912.webp","articleSection":["Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-5\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-5\/","url":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-5\/","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-5\/#primaryimage"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-5\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245569912.webp","datePublished":"2025-11-04T20:30:25+00:00","description":"Learn how to create pure CSS tabs with details using grid and subgrid layouts. Step-by-step guide with code examples.","breadcrumb":{"@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-5\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-5\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-5\/#primaryimage","url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245569912.webp","contentUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245569912.webp","width":1820,"height":1024,"caption":"Top 5 online CSS minifier tools for developers reviewed"},{"@type":"BreadcrumbList","@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid-5\/#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\/1752245569912.webp","uagb_featured_image_src":{"full":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245569912.webp",1820,1024,false],"thumbnail":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245569912-150x150.webp",150,150,true],"medium":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245569912-300x169.webp",300,169,true],"medium_large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245569912-768x432.webp",768,432,true],"large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245569912-1024x576.webp",1024,576,true],"1536x1536":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245569912-1536x864.webp",1536,864,true],"2048x2048":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245569912.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 with details using grid and subgrid layouts. Step-by-step guide with code examples.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3628","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=3628"}],"version-history":[{"count":0,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3628\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media\/2877"}],"wp:attachment":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media?parent=3628"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/categories?post=3628"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/tags?post=3628"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}