Foundation CSS Equalizer
Last Updated :
10 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. In modern browsers, sometimes the elements are not of the same height, as shown below:
Thus, this makes the website look ugly. This type of problem can be solved easily by using the Equalizer component of Foundation CSS by making the height of all three columns equal.
Foundation CSS Equalizer 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.
Foundation CSS Equalizer Class:
- grid-container: This class helps us to center the grid in the screen with margin and padding on both sides.
- grid-x: This class makes the grid arranged on the x-axis.
- grid-margin-x: This class helps to give margin to the grid elements along the x-axis.
- cell: This class is used to identify each of the elements inside the grid that needs to arrange.
- medium-4: This class is a Foundation CSS media query class. This class makes an element to be four-column width on a medium screen.
Syntax:
<div class="grid-x grid-margin-x"
data-equalizer="equalizer1"
data-equalize-on="medium">
<div class="cell medium-4">
<div data-equalizer-watch="equalizer1">
...
</div>
</div>
</div>
Example 1: In this example, we added the equalizer to equalize all the three cells of the grid to make them equal in height irrespective of containing variable-sized images and text.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Foundation CSS Equalizer
<title>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet" href=
crossorigin="anonymous">
<script src=
</script>
<script src=
crossorigin="anonymous">
</script>
<title>
Foundation CSS Equalizer
</title>
</head>
<body>
<h2 style="color: green;">GeeksforGeeks</h2>
<h4>Foundation CSS Equalizer</h4>
<div class="grid-x grid-margin-x"
data-equalizer data-equalize-on="medium"
id="test-eq">
<div class="cell medium-4">
<div class="callout" data-equalizer-watch>
<img src=
</div>
</div>
<div class="cell medium-4">
<div class="callout" data-equalizer-watch>
<img src=
</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>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Example 2: In the example, we have nested used a nested equalizer to make equalize the content inside one of the boxes of the container grid. We have used the “data-equalize-on-stack” attribute.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Foundation CSS Equalizer
<title>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet" href=
crossorigin="anonymous">
<script src=
</script>
<script src=
crossorigin="anonymous">
</script>
<title>
Foundation CSS Equalizer
</title>
</head>
<body>
<h2 style="color: green;">GeeksforGeeks</h2>
<h4>Foundation CSS Nested Equalizer</h4>
<div class="grid-container">
<div class="grid-x grid-margin-x"
data-equalize-on="medium"
data-equalizer="parent">
<div class="cell medium-4">
<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>
|
Output:
Reference: https://get.foundation/sites/docs/equalizer.html
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...