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


The zig zag layout would have an image, then text. Next, text, and then image, and it goes on. The responsive zig zag would arrange the text and image according depending on the device, desktop, tablet or mobile. The column will appear on top each other on a smaller device like a mobile. Let us see how to create a responsive zig zag layout with HTML and CSS.

Set a container for text

We have set a container for text and the class name is given width66. One of them is shown below. The text will take 66% of the width i.e. 2/3 −

<div class="width66">
   <h1>Docker</h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia tempore expedita sequi consequuntur rerum quasi voluptate deleniti iure quae magni qui, laudantium illo dolorum temporibus, dolor labore, quos eos. Dolores?</p>

Set a container for image

We have set a container for image and the class name is given width33. One of them is shown below. The text will take 33% of the width i.e. 1/3 −

<div class="width33">
   <img src="https://www.tutorialspoint.com/kubernetes/images/kubernetes-mini-logo.jpg" alt="Kubernetes">
</div>

Clear the floats

Here, we have set the clear property to the both value. This is to push the element below left and right floated element −

.row:after {
   content: "";
   display: table;
   clear: both
}

Our 2/3 column

This is a container for the text set in the layout. The width is set 66% i.e. 2/3 column. Rest, the 33% space would be allotted for the column with the image −

.width66 {
   float: left;
   width: 66.66666%;
   padding: 20px;
   height: 471px;
}

Our 1/3 column

This is a container for the image set in the layout. The width is set 33% i.e. 1/3 column. Rest, the 66% space was allotted to the column with the text −

.width33 {
   float: left;
   width: 33.33333%;
   padding: 20px;
   height: 471px;
}

Set the responsiveness

The media queries concept is used for the responsiveness. Set width 100% for devices less than 1000px. This will set the columns on top each other −

@media screen and (max-width: 1000px) {
   .width66,
   .width33 {
      width: 100%;
      text-align: center;
   }
   img {
      margin: auto;
   }
}

Example

To create responsive zig zag layout with CSS, the code is as follows −

<!DOCTYPE html>
<html>
<head>
   <style>
      * {
         box-sizing:border-box;
      }
      body {
         margin: 0;
         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      }
      div h1{
         font-size: 40px;
         color: blueviolet;
         text-align: center;
      }
      div p{
         font-size: 18px;
      }
      .container {
         padding: 64px;
      }
      .row:after {
         content: "";
         display: table;
         clear: both
      }
      .width66 {
         float: left;
         width: 66.66666%;
         padding: 20px;
         height: 471px;
      }
      .width33 {
         float: left;
         width: 33.33333%;
         padding: 20px;
         height: 471px;
      }
      .large-font {
         font-size: 48px;
      }
      .xlarge-font {
         font-size: 64px
      }
      .button {
         border: none;
         color: white;
         padding: 14px 28px;
         font-size: 16px;
         cursor: pointer;
         background-color: #4CAF50;
      }
      img {
         display: block;
         height: 250px;
         width: 250px;
         max-width: 100%;
      }
      @media screen and (max-width: 1000px) {
         .width66,
         .width33 {
            width: 100%;
            text-align: center;
         }
         img {
            margin: auto;
         }
      }
   </style>
</head>
<body>
<div class="width66">
   <h1>Docker</h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia tempore expedita sequi consequuntur rerum quasi voluptate deleniti iure quae magni qui, laudantium illo dolorum temporibus, dolor labore, quos eos. Dolores?</p>
</div>
<div class="width33">
   <img src="https://www.tutorialspoint.com/docker/images/docker-mini-logo.jpg" alt="Docker">
</div>
<div class="width33">
   <img src="https://www.tutorialspoint.com/ansible/images/ansible-mini-logo.jpg" alt="Ansible">
</div>
<div class="width66">
   <h1>Ansible</h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia tempore expedita sequi consequuntur rerum quasi voluptate deleniti iure quae magni qui, laudantium illo dolorum temporibus, dolor labore, quos eos. Dolores?</p>
</div>
<div class="width66">
   <h1>Kubernetes</h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia tempore expedita sequi consequuntur rerum quasi voluptate deleniti iure quae magni qui, laudantium illo dolorum temporibus, dolor labore, quos eos. Dolores?</p>
</div>
<div class="width33">
   <img src="https://www.tutorialspoint.com/kubernetes/images/kubernetes-mini-logo.jpg" alt="Kubernetes">
</div>
</body>
</html>

Updated on: 14-Dec-2023

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements