Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to create an expanding grid with CSS and JavaScript?

CSS Web Development Front End Technology

An expanding grid is a dynamic layout that displays a compact grid of columns initially, then expands to show detailed content when a column is clicked. This creates an interactive user experience where users can explore content without navigating to different pages.

Syntax

/* Basic grid column structure */
.column {
    float: left;
    width: 33.33%;
    cursor: pointer;
}

/* Expanded content area */
.expanded-content {
    display: none;
    width: 100%;
}

HTML Structure

Create a container with three equal columns that will serve as clickable grid items −

<div class="container">
   <div class="left" onclick="openTab('tab1')">
      <h1>Column 1</h1>
   </div>
   <div class="center" onclick="openTab('tab2')">
      <h1>Column 2</h1>
   </div>
   <div class="right" onclick="openTab('tab3')">
      <h1>Column 3</h1>
   </div>
</div>

CSS Styling

Style the columns to create equal-width grid items with proper spacing −

.left, .right, .center {
   float: left;
   width: 33.33%;
   color: white;
   padding: 20px;
   height: 200px;
   text-align: center;
   cursor: pointer;
   transition: transform 0.3s ease;
}

.left { background-color: #ff6b6b; }
.center { background-color: #4ecdc4; }
.right { background-color: #45b7d1; }

JavaScript Functionality

Add the script to handle tab opening and closing behavior −

function openTab(tabName) {
   var tabs = document.querySelectorAll(".containerTab");
   tabs.forEach(tab => tab.style.display = "none");
   document.getElementById(tabName).style.display = "block";
}

Complete Example

Here's a complete expanding grid implementation −

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        margin: 0;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: #f5f5f5;
    }
    
    * {
        box-sizing: border-box;
    }
    
    .container {
        display: flex;
        margin: 20px;
    }
    
    .left, .right, .center {
        flex: 1;
        color: white;
        padding: 40px 20px;
        text-align: center;
        cursor: pointer;
        transition: transform 0.3s ease;
        margin: 5px;
    }
    
    .left:hover, .right:hover, .center:hover {
        transform: scale(1.05);
    }
    
    .left { background-color: #ff6b6b; }
    .center { background-color: #4ecdc4; }
    .right { background-color: #45b7d1; }
    
    .containerTab {
        display: none;
        padding: 30px;
        margin: 20px;
        color: white;
        border-radius: 8px;
        animation: fadeIn 0.5s ease-in;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    .closebtn {
        float: right;
        color: white;
        font-size: 28px;
        cursor: pointer;
        transition: transform 0.3s ease;
    }
    
    .closebtn:hover {
        transform: scale(1.2);
    }
    
    h1 {
        margin: 0;
        font-size: 1.5rem;
    }
</style>
</head>
<body>
    <h1 style="text-align: center; color: #333; margin: 30px 0;">Interactive Expanding Grid</h1>
    
    <div class="container">
        <div class="left" onclick="openTab('tab1')">
            <h1>? Design</h1>
            <p>Click to explore</p>
        </div>
        <div class="center" onclick="openTab('tab2')">
            <h1>? Development</h1>
            <p>Click to explore</p>
        </div>
        <div class="right" onclick="openTab('tab3')">
            <h1>? Analytics</h1>
            <p>Click to explore</p>
        </div>
    </div>
    
    <div id="tab1" class="containerTab" style="background: #ff6b6b;">
        <span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
        <h2>Design Services</h2>
        <p>We create stunning visual experiences that engage users and drive results. Our design team specializes in modern, responsive interfaces.</p>
    </div>
    
    <div id="tab2" class="containerTab" style="background: #4ecdc4;">
        <span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
        <h2>Development Solutions</h2>
        <p>Full-stack development services using modern technologies. We build scalable, performant web applications tailored to your needs.</p>
    </div>
    
    <div id="tab3" class="containerTab" style="background: #45b7d1;">
        <span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
        <h2>Analytics & Insights</h2>
        <p>Data-driven insights to optimize your digital presence. Track performance, understand user behavior, and make informed decisions.</p>
    </div>
    
    <script>
        function openTab(tabName) {
            var tabs = document.querySelectorAll(".containerTab");
            tabs.forEach(tab => tab.style.display = "none");
            document.getElementById(tabName).style.display = "block";
        }
    </script>
</body>
</html>

Three colorful columns (red, teal, blue) appear horizontally with hover effects. Clicking any column expands it into a full-width content area with a close button. The expansion includes smooth animations and the content area displays relevant information with a matching background color.

Key Features

  • Responsive Design: Uses flexbox for better responsive behavior
  • Smooth Animations: CSS transitions and keyframes for polished interactions
  • Interactive Feedback: Hover effects and transform animations
  • Accessible Closing: Large, easy-to-click close buttons

Conclusion

An expanding grid combines CSS layout techniques with JavaScript interactivity to create engaging user interfaces. This pattern is perfect for showcasing multiple services or content categories in a compact, exploreable format.

Updated on: 2026-03-15T15:16:07+05:30

743 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements