Skip to content
Related Articles

Related Articles

Foundation CSS Equalizer Nesting

View Discussion
Improve Article
Save Article
  • Last Updated : 17 Mar, 2022
View Discussion
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!