Foundation CSS Equalizer Equalize By Row

Last Updated : 23 Mar, 2022

Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.

The Equalizer component helps to make multiple website elements of the same height. Foundation CSS Equalizer Equalize By Row is used to fix the height of row items. If multiple items present in a row, then the height of each items will be same.

Used Attribute:

data-equalize-by-row: This attribute is used to set the equal height of each items in a row. It accepts boolean type value.

Syntax:

<div class="grid-x grid-padding-x large-up-4" 
    data-equalizer data-equalize-by-row="true">
      <div class="cell" data-equalizer-watch>...</div>
      ...
</div>

Example 1: This example describes the uses of Foundation CSS Equalizer Equalize By Row.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> 
        Foundation CSS Equalizer Equalize By Row 
    </title> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css"
        crossorigin="anonymous"> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"
        crossorigin="anonymous"> 
    </script> 
  
    <style> 
        body { 
            padding: 0 100px; 
        } 
    </style> 
</head> 
  
<body> 
    <h2 style="color: green;"> 
        GeeksforGeeks 
    </h2> 
      
    <h4>Foundation CSS Equalizer Equalize By Row</h4> 
      
    <div class="grid-x grid-margin-x" data-equalizer  
        data-equalize-by-row="true"> 
        <div class="cell medium-8"> 
            <div class="callout" data-equalizer-watch> 
                <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220305173028/starts-300x218.png"> 
            </div> 
        </div> 
      
        <div class="cell medium-4"> 
            <div class="callout" data-equalizer-watch> 
                <p> 
                    This article in on the Equalizer  
                    Component of Foundation CSS. It  
                    is published in GeeksforGeeks  
                    Platform. 
                </p> 
            </div> 
        </div> 
  
        <div class="cell medium-4"> 
            <div class="callout" data-equalizer-watch> 
                <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220302090848/star5.png"> 
            </div> 
        </div> 
    </div> 
  
    <script> 
        $(document).foundation(); 
    </script> 
</body> 
  
</html>

Output:

Example 2: This example describes the uses of Foundation CSS Equalizer Equalize By Row.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> 
        Foundation CSS Equalizer Equalize By Row 
    </title> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css"
        crossorigin="anonymous"> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"
        crossorigin="anonymous"> 
    </script> 
  
    <style> 
        body { 
            padding: 0 100px; 
        } 
    </style> 
</head> 
  
<body> 
    <h2 style="color: green;"> 
        GeeksforGeeks 
    </h2> 
  
    <h4>Foundation CSS Equalizer Equalize By Row</h4> 
  
    <div class="grid-container"> 
        <div class="grid-x grid-margin-x" 
            data-equalize-on="medium" data-equalizer="parent" 
            data-equalize-by-row="true"> 
            <div class="cell medium-8"> 
                <div class="callout" data-equalizer-watch="parent"
                    data-equalizer="block1"
                    data-equalize-on-stack="true"> 
                    <h3>The block with nested blocks</h3> 
                    <div class="callout" data-equalizer-watch="block1"> 
                        <p> 
                            The three callouts in this panel 
                            will equalize, even when stacked. 
                        </p> 
                    </div> 
                    <div class="callout" data-equalizer-watch="block1"> 
                        <p> 
                            this is the sample text for displaying 
                            inside the block of the parent container. 
                        </p> 
                    </div> 
                    <div class="callout" data-equalizer-watch="block1"> 
                        <p> 
                            this is the sample text for displaying 
                            inside the block of the parent container. 
                        </p> 
                    </div> 
                </div> 
            </div> 
            <div class="cell medium-4"> 
                <div class="callout panel" data-equalizer-watch="parent"> 
                    <p> 
                        this is the sample text for displaying 
                        inside the block of the parent container. 
                    </p> 
                </div> 
            </div> 
            <div class="cell medium-4"> 
                <div class="callout" data-equalizer-watch="parent"> 
                    <p> 
                        this is the sample text for displaying 
                        inside the block of the parent container. 
                    </p> 
                </div> 
            </div> 
        </div> 
    </div> 
  
    <script> 
        $(document).foundation(); 
    </script> 
</body> 
  
</html>