Home Whiteboard Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to create a responsive zig zag (alternating) layout with CSS?

CSS Web Development Front End Technology

A responsive zig zag (alternating) layout creates a visually appealing pattern where content alternates between left and right sides. The layout typically features text and images that switch positions − image left with text right, then text left with image right, and so on. On smaller devices, the columns stack vertically for better mobile viewing.

Syntax

.container {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
    align-items: center;
}

.row:nth-child(even) {
    flex-direction: row-reverse;
}

Method 1: Using Flexbox

Modern CSS flexbox provides an efficient way to create responsive zig zag layouts. This approach uses flex-direction: row-reverse for alternating rows.

<!DOCTYPE html>
<html>
<head>
<style>
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    
    body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
    }
    
    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }
    
    .row {
        display: flex;
        align-items: center;
        margin-bottom: 40px;
        min-height: 300px;
    }
    
    .row:nth-child(even) {
        flex-direction: row-reverse;
    }
    
    .content {
        flex: 2;
        padding: 20px;
    }
    
    .image-container {
        flex: 1;
        padding: 20px;
        text-align: center;
    }
    
    .content h2 {
        color: #333;
        margin-bottom: 15px;
        font-size: 28px;
    }
    
    .content p {
        color: #666;
        font-size: 16px;
    }
    
    img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    
    @media screen and (max-width: 768px) {
        .row,
        .row:nth-child(even) {
            flex-direction: column;
            text-align: center;
        }
        
        .content,
        .image-container {
            flex: none;
            width: 100%;
        }
    }
</style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="content">
                <h2>Docker Technology</h2>
                <p>Docker is a platform that uses containerization technology to make it easier to create, deploy, and run applications. It packages applications and their dependencies into lightweight, portable containers.</p>
            </div>
            <div class="image-container">
                <img src="/docker/images/docker-mini-logo.jpg" alt="Docker">
            </div>
        </div>
        
        <div class="row">
            <div class="content">
                <h2>Kubernetes Platform</h2>
                <p>Kubernetes is an open-source container orchestration platform that automates the deployment, scaling, and management of containerized applications across clusters of hosts.</p>
            </div>
            <div class="image-container">
                <img src="/kubernetes/images/kubernetes-mini-logo.jpg" alt="Kubernetes">
            </div>
        </div>
        
        <div class="row">
            <div class="content">
                <h2>Ansible Automation</h2>
                <p>Ansible is an automation tool that helps with configuration management, application deployment, and task automation. It uses simple YAML syntax for defining automation tasks.</p>
            </div>
            <div class="image-container">
                <img src="/ansible/images/ansible-mini-logo.jpg" alt="Ansible">
            </div>
        </div>
    </div>
</body>
</html>

A responsive zig zag layout displays with three rows: Docker (text left, image right), Kubernetes (text right, image left), and Ansible (text left, image right). On mobile devices, content stacks vertically with images above text.

Method 2: Using CSS Grid

CSS Grid provides another modern approach for creating zig zag layouts with precise control over positioning.

<!DOCTYPE html>
<html>
<head>
<style>
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    
    body {
        font-family: Arial, sans-serif;
        padding: 20px;
        background-color: #f5f5f5;
    }
    
    .grid-container {
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        align-items: center;
    }
    
    .content-box {
        padding: 30px;
        background-color: white;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .content-box h3 {
        color: #2c3e50;
        margin-bottom: 15px;
        font-size: 24px;
    }
    
    .content-box p {
        color: #555;
        line-height: 1.6;
    }
    
    .image-box {
        text-align: center;
        padding: 20px;
    }
    
    .image-box img {
        max-width: 200px;
        height: auto;
        border-radius: 50%;
        border: 4px solid #3498db;
    }
    
    /* Alternate positioning for zig zag effect */
    .row-1 { grid-column: 1; grid-row: 1; }
    .row-1-img { grid-column: 2; grid-row: 1; }
    .row-2 { grid-column: 2; grid-row: 2; }
    .row-2-img { grid-column: 1; grid-row: 2; }
    .row-3 { grid-column: 1; grid-row: 3; }
    .row-3-img { grid-column: 2; grid-row: 3; }
    
    @media screen and (max-width: 768px) {
        .grid-container {
            grid-template-columns: 1fr;
            gap: 20px;
        }
        
        .row-1, .row-1-img,
        .row-2, .row-2-img,
        .row-3, .row-3-img {
            grid-column: 1;
        }
        
        .image-box {
            order: -1;
        }
    }
</style>
</head>
<body>
    <div class="grid-container">
        <div class="content-box row-1">
            <h3>Web Development</h3>
            <p>Modern web development involves creating responsive, interactive websites using HTML, CSS, and JavaScript. Front-end frameworks make development faster and more efficient.</p>
        </div>
        <div class="image-box row-1-img">
            <img src="/html/images/html-mini-logo.jpg" alt="HTML">
        </div>
        
        <div class="content-box row-2">
            <h3>Database Management</h3>
            <p>Database systems store, organize, and manage data efficiently. SQL and NoSQL databases serve different needs in modern applications and data processing workflows.</p>
        </div>
        <div class="image-box row-2-img">
            <img src="/mysql/images/mysql-mini-logo.jpg" alt="MySQL">
        </div>
        
        <div class="content-box row-3">
            <h3>Cloud Computing</h3>
            <p>Cloud platforms provide scalable infrastructure and services for modern applications. They offer flexibility, cost-efficiency, and global reach for businesses of all sizes.</p>
        </div>
        <div class="image-box row-3-img">
            <img src="/aws/images/aws-mini-logo.jpg" alt="AWS">
        </div>
    </div>
</body>
</html>

A grid-based zig zag layout displays three alternating rows with content and circular images. The layout shows Web Development (left) with HTML logo (right), Database Management (right) with MySQL logo (left), and Cloud Computing (left) with AWS logo (right). On mobile, content stacks vertically.

Key Points

  • Flexbox Method: Uses flex-direction: row-reverse on even rows for alternating layout
  • Grid Method: Provides precise control with explicit grid positioning
  • Responsive Design: Both methods stack content vertically on mobile devices
  • Accessibility: Maintain proper heading hierarchy and alt text for images

Conclusion

Responsive zig zag layouts create engaging visual patterns that work well for showcasing alternating content. Flexbox offers simplicity while CSS Grid provides more control. Both methods ensure mobile responsiveness through media queries.

Updated on: 2026-03-15T15:17:29+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements