Creación de cuadrícula de altura igual en JavaScript puro-equaldiv

Vista prévia

Descripción

equaldiv es un plugin de JavaScript vainilla que iguala la altura de los elementos de la cuadrícula dentro de la misma fila.

Funcionamiento

Descargue e importe el script ' equalDiv. js ' en el documento HTML.

<script src="equalDiv.js"></script>

Añada la clase CSS ' ecualizada ' a su contenedor Grid:

<div id="content">
 <div class="content-wrap equalized">


<div>
 <span class="equalized-watch"><h1>Header</h1>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nunc est, facilisis in blandit sit amet, rhoncus vel lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.</span>
 </div>
 <div>
 <span class="equalized-watch"><h1>Header</h1>2. Vivamus eu lorem mauris. Curabitur elementum felis nec libero malesuada in varius neque ultrices. Nunc sollicitudin nunc non risus mattis at varius lorem sagittis. Ut erat quam, molestie a viverra ac, porttitor a massa. Mauris eget mollis massa. Suspendisse et erat sem. Vestibulum eleifend vulputate elit at adipiscing. Suspendisse ac lectus massa.</span>
 </div>
 <div>
 <span class="equalized-watch"><h1>Header</h1>3. Nulla gravida neque nec metus tempus pulvinar. Nulla tincidunt lacinia ultricies. Curabitur tristique malesuada bibendum. Phasellus congue magna sem. Morbi tristique dui non sem ullamcorper fringilla. Nullam nec feugiat nibh. Duis sodales rutrum tortor sit amet volutpat.</span>
 </div>

 ...


</div>
</div>

Inicialice el equaldiv y ya está.

equalDiv({

containerID: 'content'
});

Establezca la altura mínima del elemento de rejilla.

equalDiv({

containerID: 'content',

minHeight: 0
});