Equalize the height of your elements in your page.
- Check what I mean -->here<--
npm install react-equalize
- Wrap the list of elements you want to equalize the height
import React from "react"; import { EqualizerContainer } from "react-equalize"; import samples from './samples'; import Card from './Card'; const List = () => ( <div> <h2>List</h2> <EqualizerContainer> {samples.map(sample => ( <Card title={sample.title} img={sample.img} /> ))} </EqualizerContainer> </div> ); export default List;
- Equalize the elements of your choice
// Card.js import React from "react"; import { Equalize } from "react-equalize"; const Card = ({ title, img, description }) => ( <div> <p> <Equalize>{title}</Equalize> </p> <Equalize> <img src={img} width="100%" alt="boo" /> </Equalize> <p> <Equalize>{description}</Equalize> </p> </div> ); export default Card;
| Prop | Type | Description |
|---|---|---|
elements |
Array |
List of elements that should re-trigger the calculation. |