{"id":3573,"date":"2025-10-28T20:30:22","date_gmt":"2025-10-28T20:30:22","guid":{"rendered":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid\/"},"modified":"2025-10-28T20:30:22","modified_gmt":"2025-10-28T20:30:22","slug":"pure-css-tabs-details-grid-subgrid","status":"publish","type":"post","link":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid\/","title":{"rendered":"Pure CSS Tabs With Details, Grid, and Subgrid"},"content":{"rendered":"
\n

Introduction<\/h2>\n

Creating tabs is a common UI pattern that enhances user experience by allowing users to navigate through content without leaving the page. Using pure CSS for tabs is not only efficient but also keeps your project lightweight. In this guide, we will explore how to implement pure CSS tabs using details, grid, and subgrid layouts.<\/p>\n

What You Need<\/h2>\n

Before we begin, ensure you have a basic understanding of HTML and CSS. We will also use the CSS Minifier<\/a> to optimize our styles in the final steps. Let’s dive into the implementation!<\/p>\n

Step 1: Basic HTML Structure<\/h2>\n

We’ll start by creating a simple HTML structure for our tabs using the <details><\/code> element for each tab. Here\u2019s how to set it up:<\/p>\n

<div class=\"tabs\">\n    <details>\n        <summary>Tab 1<\/summary>\n        <div class=\"content\">\n            <p>Content for Tab 1<\/p>\n        <\/div>\n    <\/details>\n    <details>\n        <summary>Tab 2<\/summary>\n        <div class=\"content\">\n            <p>Content for Tab 2<\/p>\n        <\/div>\n    <\/details>\n    <details>\n        <summary>Tab 3<\/summary>\n        <div class=\"content\">\n            <p>Content for Tab 3<\/p>\n        <\/div>\n    <\/details>\n<\/div>\n<\/code><\/pre>\n
Step 2: Styling with CSS Grid<\/h2>\n
Next, we will style our tabs using CSS Grid to ensure a responsive layout. Here\u2019s how to do it:<\/p>\n
.tabs {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 1rem;\n}\n\ndetails {\n    background: #f1f1f1;\n    border: 1px solid #ccc;\n    border-radius: 4px;\n    padding: 10px;\n}\n\nsummary {\n    font-weight: bold;\n    cursor: pointer;\n}\n\n.content {\n    display: none;\n}\n\ndetails[open] .content {\n    display: block;\n}\n<\/code><\/pre>\n
Step 3: Implementing Subgrid<\/h2>\n
Subgrid allows us to align child elements in a grid layout based on the parent grid. This is particularly useful if we want to control the layout of content within each tab. Here\u2019s how to implement it:<\/p>\n
.content {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n}\n\n.sub-item {\n    background: #e1e1e1;\n    padding: 10px;\n}\n<\/code><\/pre>\n
Example of Subgrid Usage<\/h3>\n
Here\u2019s an example of how to define sub-items within a tab:<\/p>\n
<div class=\"content\">\n    <div class=\"sub-item\">Sub-item 1<\/div>\n    <div class=\"sub-item\">Sub-item 2<\/div>\n    <div class=\"sub-item\">Sub-item 3<\/div>\n    <div class=\"sub-item\">Sub-item 4<\/div>\n<\/div>\n<\/code><\/pre>\n
Step 4: Final Touches<\/h2>\n
To make our tabs visually appealing, consider adding hover effects and transitions. We can also minify our CSS using the CSS Minifier<\/a> for better performance:<\/p>\n
details:hover {\n    background: #ddd;\n}\n\nsummary:hover {\n    color: #007BFF;\n}\n<\/code><\/pre>\n
FAQs<\/h2>\n
Can I use JavaScript with pure CSS tabs?<\/h3>\n
While the focus is on pure CSS, JavaScript can enhance interactivity, such as toggling the open state of tabs dynamically.<\/p>\n
What browsers support CSS Grid and subgrid?<\/h3>\n
Most modern browsers support CSS Grid, but it’s best to check compatibility for the subgrid feature.<\/p>\n
How can I improve my CSS organization?<\/h3>\n
Using a CSS preprocessor like SASS or LESS can help in managing styles better, but for pure CSS, consider using organized classes and comments.<\/p>\n
Conclusion<\/h2>\n
Creating pure CSS tabs with details, grid, and subgrid layouts can significantly improve user experience on your website. By following this guide, you can implement a clean and responsive tab system without relying on JavaScript. Don\u2019t forget to optimize your code using tools like the HTML Minifier<\/a> and the JS Minifier<\/a> for the best performance.<\/p>\n<\/article>\n","protected":false},"excerpt":{"rendered":"
Learn to create pure CSS tabs with details, grid, and subgrid layouts. Step-by-step guide with code examples and tips.<\/p>\n","protected":false},"author":1,"featured_media":2867,"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-3573","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development"],"yoast_head":"\nPure CSS Tabs With Details, Grid, and Subgrid - WebToolsLab<\/title>\n<meta name=\"description\" content=\"Learn to create pure CSS tabs with details, grid, and subgrid layouts. Step-by-step guide with code examples and tips.\" \/>\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\/\" \/>\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 to create pure CSS tabs with details, grid, and subgrid layouts. Step-by-step guide with code examples and tips.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid\/\" \/>\n<meta property=\"og:site_name\" content=\"WebToolsLab\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-28T20:30:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245895479.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\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid\\\/\"},\"author\":{\"name\":\"maashraf\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"headline\":\"Pure CSS Tabs With Details, Grid, and Subgrid\",\"datePublished\":\"2025-10-28T20:30:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid\\\/\"},\"wordCount\":381,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245895479.webp\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid\\\/\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid\\\/\",\"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\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245895479.webp\",\"datePublished\":\"2025-10-28T20:30:22+00:00\",\"description\":\"Learn to create pure CSS tabs with details, grid, and subgrid layouts. Step-by-step guide with code examples and tips.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid\\\/#primaryimage\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245895479.webp\",\"contentUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245895479.webp\",\"width\":1820,\"height\":1024,\"caption\":\"1752245895479\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/pure-css-tabs-details-grid-subgrid\\\/#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 to create pure CSS tabs with details, grid, and subgrid layouts. Step-by-step guide with code examples and tips.","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\/","og_locale":"en_US","og_type":"article","og_title":"Pure CSS Tabs With Details, Grid, and Subgrid - WebToolsLab","og_description":"Learn to create pure CSS tabs with details, grid, and subgrid layouts. Step-by-step guide with code examples and tips.","og_url":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid\/","og_site_name":"WebToolsLab","article_published_time":"2025-10-28T20:30:22+00:00","og_image":[{"width":1820,"height":1024,"url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245895479.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\/#article","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid\/"},"author":{"name":"maashraf","@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"headline":"Pure CSS Tabs With Details, Grid, and Subgrid","datePublished":"2025-10-28T20:30:22+00:00","mainEntityOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid\/"},"wordCount":381,"commentCount":0,"publisher":{"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245895479.webp","articleSection":["Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid\/","url":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid\/","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\/#primaryimage"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245895479.webp","datePublished":"2025-10-28T20:30:22+00:00","description":"Learn to create pure CSS tabs with details, grid, and subgrid layouts. Step-by-step guide with code examples and tips.","breadcrumb":{"@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid\/#primaryimage","url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245895479.webp","contentUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245895479.webp","width":1820,"height":1024,"caption":"1752245895479"},{"@type":"BreadcrumbList","@id":"https:\/\/webtoolslab.io\/blog\/pure-css-tabs-details-grid-subgrid\/#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\/1752245895479.webp","uagb_featured_image_src":{"full":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245895479.webp",1820,1024,false],"thumbnail":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245895479-150x150.webp",150,150,true],"medium":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245895479-300x169.webp",300,169,true],"medium_large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245895479-768x432.webp",768,432,true],"large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245895479-1024x576.webp",1024,576,true],"1536x1536":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245895479-1536x864.webp",1536,864,true],"2048x2048":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245895479.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 to create pure CSS tabs with details, grid, and subgrid layouts. Step-by-step guide with code examples and tips.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3573","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=3573"}],"version-history":[{"count":0,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3573\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media\/2867"}],"wp:attachment":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media?parent=3573"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/categories?post=3573"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/tags?post=3573"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}