Foundation CSS Equalizer Nesting

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.

Output:

👁 Foundation CSS Equalizer Nesting

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

Output:

👁 Foundation CSS Equalizer Nesting

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