Pure CSS Tabs With Details, Grid, and Subgrid

Introduction

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.

What You Need

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

Step 1: Basic HTML Structure

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

<div class="tabs">
    <details>
        <summary>Tab 1</summary>
        <div class="content">
            <p>Content for Tab 1</p>
        </div>
    </details>
    <details>
        <summary>Tab 2</summary>
        <div class="content">
            <p>Content for Tab 2</p>
        </div>
    </details>
    <details>
        <summary>Tab 3</summary>
        <div class="content">
            <p>Content for Tab 3</p>
        </div>
    </details>
</div>

Step 2: Styling with CSS Grid

Next, we will style our tabs using CSS Grid to ensure a responsive layout. Here’s how to do it:

.tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

details {
    background: #f1f1f1;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
}

summary {
    font-weight: bold;
    cursor: pointer;
}

.content {
    display: none;
}

details[open] .content {
    display: block;
}

Step 3: Implementing Subgrid

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’s how to implement it:

.content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.sub-item {
    background: #e1e1e1;
    padding: 10px;
}

Example of Subgrid Usage

Here’s an example of how to define sub-items within a tab:

<div class="content">
    <div class="sub-item">Sub-item 1</div>
    <div class="sub-item">Sub-item 2</div>
    <div class="sub-item">Sub-item 3</div>
    <div class="sub-item">Sub-item 4</div>
</div>

Step 4: Final Touches

To make our tabs visually appealing, consider adding hover effects and transitions. We can also minify our CSS using the CSS Minifier for better performance:

details:hover {
    background: #ddd;
}

summary:hover {
    color: #007BFF;
}

FAQs

Can I use JavaScript with pure CSS tabs?

While the focus is on pure CSS, JavaScript can enhance interactivity, such as toggling the open state of tabs dynamically.

What browsers support CSS Grid and subgrid?

Most modern browsers support CSS Grid, but it’s best to check compatibility for the subgrid feature.

How can I improve my CSS organization?

Using a CSS preprocessor like SASS or LESS can help in managing styles better, but for pure CSS, consider using organized classes and comments.

Conclusion

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’t forget to optimize your code using tools like the HTML Minifier and the JS Minifier for the best performance.