Tener un grid con todas las filas al mismo tamaño puede ser algo difícil de conseguir. El problema viene con que CSS grid toma el tamaño de las filas según el tamaño máximo de sus celdas.
Para conseguir ello es necesario que el contenido de la celda tenga posicionamiento absoluto, y jugar con ::before para simular contenido vacío que rellene la celda:
.grid {
margin: 0 auto;
width: 60vw;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
grid-auto-rows: auto;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
.grid--same-height .cell {
position: relative;
}
.grid--same-height .cell::before {
content: "";
display: inline-block;
padding-bottom: 100%;
}
.grid--same-height .content {
height: 100%;
position: absolute;
margin-top: -100%;
}
Teniendo en cuenta que el HTML sería:
<div id="grid" class="grid">
<div class="cell">
<div class="content">
<img src="https://picsum.photos/500/500"/>
</div>
</div>
...
</div>Para el ejemplo uso picsum.photos, un lorem ipsum para fotos que permite indicar distintos tamaños de imágenes.
Podéis ver un ejemplo en este pen
MemcacheDB es un sistema de almacenamiento clave-valor distribuido diseñado para persistencia. No se trata de una solución de caché, pero si sigue el control memcache (no completamente), por lo que cualquier cliente de memcached puede conectar con él. Utiliza como sistema base de almacenamiento Berkeley DB (una de las más rápidas), por lo que muchas de sus características incluye transacciones y replicación.
Tiene un alto rendimiento de lectura/escritura para objetos basados en claves-valor. Entre los comandos de memcache soporta get, set, add, replace, append, prepend, incr, decr, delete y stats.
MemcacheDB