<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
title
>
Foundation CSS Equalizer Equalize By Row
</
title
>
<
link
rel
=
"stylesheet"
href
=
crossorigin
=
"anonymous"
>
<
script
src
=
</
script
>
<
script
src
=
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
>