Open In App

Foundation CSS Kitchen Sink Equalizer

Improve
Improve
Like Article
Like
Save
Share
Report

Foundation CSS is one of the popular front-end frameworks. It helps developers to add complex components to their websites very easily. It enables us to add various advanced components like accordions, breadcrumbs, buttons, and many more to the website. Thus, making the website more professional to use and also making it user-friendly.

Kitchen Sink is a page in Foundation CSS in which all the major components are listed with their codes. It contains all the basic templates of each component with its code. In this article, we will learn about the Equalizer component present in the Kitchen Sink page of the Foundation CSS. The Equalizer component is very useful in modern websites where we need to make different components to be equal in height when they are arranged in vertical or horizontal order in the website.

Foundation CSS Equalizer Data Attributes:

  • data-equalizer: This attribute is added to the parent container component which holds the child elements which will be equalized.
  • data-equalize-on: This attribute holds the value of the screen size for which the elements shall be equalized. It can have values like small, large, and medium respectively. It is added to the parent component.
  • data-equalizer-watch: This attribute is added to the child elements. It contains the value of the parent equalizer id.
  • data-equalize-by-row: This attribute is very useful in distributing elements in rows.
  • data-equalize-on-stack: This attribute enables the height equalization of elements when stacked in a row.

Note: The Equalizer component does not require any specific class.

Syntax:

<div class="grid-x grid-margin-x"
     data-equalizer="equalize1"
     data-equalize-on="medium">
    <div class="cell medium-3">
        <div data-equalizer-watch="equalize1">
            ...
        </div>
    </div>
    ...
</div>

Example 1: In this example, we have 4 columns of different sized images and texts and we want them to be equal height when placed horizontally on the website.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Foundation CSS Kitchen Sink Equalizer</title>
    <link rel="stylesheet" 
          href=
</head>
  
<body>
    <h1>Foundation CSS Equalizer</h1>
    <h2 style="color: green;">GeeksForGeeks</h2>
    <div class="grid-x grid-margin-x"
         data-equalizer 
         data-equalize-on="medium"
         id="test-eq">
        <div class="cell medium-3">
            <div class="callout"
                 data-equalizer-watch>
                <img src=
            </div>
        </div>
        <div class="cell medium-3">
            <div class="callout"
                 data-equalizer-watch>
                <img src=
            </div>
        </div>
        <div class="cell medium-3">
            <div class="callout"
                 data-equalizer-watch>
                <img src=
                <p>This article in on the Equalizer
                   Component of Foundation CSS. It 
                   is published in GeeksforGeeks
                   Platform.</p>
  
            </div>
        </div>
        <div class="cell medium-3">
            <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>
    <script src=
    </script>
    <script src=
    </script>
    <script>
        $(document).foundation();
    </script>
</body>
  
</html>


Output:

Foundation CSS Kitchen Sink Equalizer

Example 2: In this example, we are having 2 rows in which the first column has 3 rows and the second column has 4 rows respectively and we have stacked them in equal height using the Kitchen Sink Equalizer attributes.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Foundation CSS Kitchen Sink Equalizer</title>
    <link rel="stylesheet"
          href=
</head>
  
<body>
    <h1>Foundation CSS Equalizer</h1>
    <h2 style="color: green;">GeeksForGeeks</h2>
    <div class="grid-container">
        <div class="grid-x grid-margin-x" 
             data-equalize-on="medium" 
             data-equalizer="eq1">
            <div class="cell medium-4">
                <div class="callout"
                     data-equalizer-watch="eq1"
                     data-equalizer="eq1.1" 
                     data-equalize-on-stack="true">
                    <h3>First Column</h3>
                    <div class="callout"
                         data-equalizer-watch="eq1.1">
                        <p>This article in on the Equalizer Component 
                            of Foundation CSS. It is published in
                            GeeksforGeeks Platform.This article in
                            on the Equalizer Component of Foundation CSS.
                            It is published in GeeksforGeeks Platform
                        </p>
  
                    </div>
                    <div class="callout" data-equalizer-watch="eq1.1">
                        <p>This article in on the Equalizer Component of
                           Foundation CSS. It is published in GeeksforGeeks 
                           Platform
                        </p>
  
                    </div>
                </div>
            </div>
            <div class="cell medium-4">
                <div class="callout"
                     data-equalizer-watch="eq1"
                     data-equalizer="eq1.2" 
                     data-equalize-on-stack="true">
                    <h3>Second Column</h3>
                    <div class="callout"
                         data-equalizer-watch="eq1.2">
                        <p>This article in on the Equalizer Component
                           of Foundation CSS. It is published in
                           GeeksforGeeks Platform.This article in on 
                           the Equalizer Component of Foundation CSS.
                           It is published in GeeksforGeeks Platform
                        </p>
  
                    </div>
                    <div class="callout" data-equalizer-watch="eq1.2">
                        <p>This article in on the Equalizer Component of
                           Foundation CSS. It is published in
                           GeeksforGeeks Platform
                        </p>
  
                    </div>
                    <div class="callout" data-equalizer-watch="eq1.2">
                        <p>This article in on the Equalizer Component
                           of Foundation CSS. It is published in
                           GeeksforGeeks Platform
                        </p>
  
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src=
    </script>
    <script src=
    </script>
    <script>
        $(document).foundation();
    </script>
</body>
  
</html>


Output:

Foundation CSS Kitchen Sink Equalizer

Foundation CSS Kitchen Sink Equalizer

Reference: https://get.foundation/sites/docs/kitchen-sink.html#equalizer



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