links for 2007-02-18

ByLuis

Similar Posts

links for 2007-02-06

ByLuis
|

CSS grid: filas con misma altura

ByLuis

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

Precarga y caché de archivos FLV

ByLuis

Muy buena entrada y explicación de cómo hacer que una serie de videos flv se cacheen mediante una precarga. En el caso que comenta el autor, se trata de una serie de videos que según muestran los logs, cada usuario acabará viendo.
Para mejorar la velocidad creará un pequeño swf que precargará las peliculas más frecuentes y luego mediante Javascript, cookies, ActionScript y configuración de Apache establecerá la caché de los archivos y su precarga.
Preload and cache flash flv files

links for 2007-03-20

ByLuis