Foundation CSS Equalizer Equalize By Row

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.

Output:

👁 Image

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

Output:

👁 Image

Reference: https://get.foundation/sites/docs/equalizer.html#equalize-by-row