Open In App

Foundation CSS Equalizer Nesting

Improve
Improve
Like Article
Like
Save
Share
Report

Foundation CSS is the frontend framework of CSS that is used to build responsive websites, apps, and emails that work perfectly on any device. It is written using HTML, CSS, and Javascript and is used by many famous companies like Amazon, Facebook, eBay, etc. It uses packages like Grunt and Libsass for fast coding and controlling and Saas compiler to make development faster. 

Foundation CSS Equalizer is used to give equal height to multiple items. When the elements are of different heights then we can use Equalizer to give the same height to all the elements. Equalizer Nesting is used to create an equalizer inside another equalizer. In this article, we will discuss Foundation CSS Equalizer Nesting.

Foundation CSS Equalizer Nesting Attributes: 

  • data-equalizer: This attribute is added to the parent element to hold the child elements.
  • data-equalizer-watch: This attribute is used with the child element to hold the parent element id.

Syntax:

<div class="grid-x" data-equalizer="equa1">
  <div class="cell medium-4" 
         data-equalizer-watch="equa1">
    <div class="callout" 
         data-equalizer-watch="equa1" 
         data-equalizer="nest1">
      ....
  </div>
</div>

Example 1: The following code demonstrates the Foundation CSS Equalizer Nesting with some text.

HTML




<!DOCTYPE html>
<html>
  
<head>
  <title> Foundation CSS Equalizer Nesting </title>
  <!-- Compressed CSS -->
  <link rel="stylesheet"
        href=
        
  <!-- Compressed JavaScript -->
  <script src=
  </script>
  <script src=
  </script>
</head>
  
<body>
  <center>
    <h2 style="color: green;">
      GeeksforGeeks
    </h2>
    <h4>
      Foundation CSS Equalizer Nesting
    </h4>
  </center>
  
  <div class="grid-x grid-margin-x align-center" 
       data-equalizer="outer">
    <div class="cell medium-6" 
         data-equalizer-watch="outer">
      <div class="callout" 
           data-equalizer-watch="outer" 
           data-equalizer="nest"
           data-equalize-on-stack="true">
        <h3>
          GeeksforGeeks Parent block
        </h3>
        <div class="callout alert"
             data-equalizer-watch="nest">
          <p>
            Nested block 1:
            A Computer Science portal for geeks.
          </p>
  
        </div>
  
        <div class="callout secondary" 
             data-equalizer-watch="nest">
          <p>
            Nested block 2:
            It contains well written, well thought
            and well explained computer science and
            programming articles.
          </p>
  
        </div>
  
        <div class="callout success" data-equalizer-watch="nest">
          <p>
            Nested block 3:
            GeeksforGeeks
          </p>
  
        </div>
      </div>
    </div>
  
    <div class="cell medium-6">
      <div class="callout panel" 
           data-equalizer-watch="outer">
        <p>
          It contains well written, well thought
          and well explained computer science and
          programming articles.
        </p>
  
      </div>
    </div>
  </div>
  
  <script>
    $(document).ready(function () {
      $(document).foundation();
    });
  </script>
</body>
</html>


Output:

Foundation CSS Equalizer Nesting

Foundation CSS Equalizer Nesting

Example 2: The following code demonstrates the Foundation CSS Equalizer Nesting with images.

HTML




<!DOCTYPE html>
<html>
  
<head>
  <title> Foundation CSS Equalizer Nesting </title>
  <!-- Compressed CSS -->
  <link rel="stylesheet" 
        href=
        
  <!-- Compressed JavaScript -->
  <script src=
  </script>
  <script src=
  </script>
</head>
  
<body>
  <center>
    <h2 style="color: green;">
      GeeksforGeeks
    </h2>
    <h4>
      Foundation CSS Equalizer Nesting
    </h4>
  </center>
  
  <div class="grid-x grid-margin-x align-center" 
       data-equalizer="outer" >
    <div class="cell medium-6" 
         data-equalizer-watch="outer">
      <div class="callout secondary" 
           data-equalizer-watch="outer" 
           data-equalizer="nest"
           data-equalize-on-stack="true" >
        <h3>
          GeeksforGeeks Parent block
        </h3>
  
        <div class="callout alert"
             data-equalizer-watch="nest">
          <strong> Nested block </strong> <br>
          <img src=
               alt="GFG">
        </div>
  
        <div class="callout success" 
             data-equalizer-watch="nest">
          <strong> Nested block </strong> <br>
          <p>
            A Computer Science portal for geeks.
          </p>
  
        </div>
  
        <div class="callout warning" 
             data-equalizer-watch="nest">
          <strong> Nested block </strong> <br>
          <img src=
               alt="GFG">
        </div>
      </div>
    </div>
  
    <div class="cell medium-6">
      <div class="callout panel secondary"
           data-equalizer-watch="outer">
        <strong> GeeksforGeeks </strong> <br>
        <img src=
             alt="">
      </div>
    </div>
  </div>
  
  <script>
    $(document).ready(function () {
      $(document).foundation();
    });
  </script>
</body>
</html>


Output:

Foundation CSS Equalizer Nesting

Foundation CSS Equalizer Nesting

Reference: https://get.foundation/sites/docs/equalizer.html#nesting



Last Updated : 17 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads