links for 2007-03-07

ByLuis
  • Correr WordPress desde Memoria USB – X-WEB
    Tutorial (en inglés) donde nos enseñan cómo instalar WordPress en una memoria USB para poder trabajar en el diseño de un tema (Themes) o interesante sobre todo si quieres hacer una demostración del programa en cualquier PC. Sin tener que instalarlo o
    (tags: wordpress)
  • El alojamiento de sitios web y sus opciones
    Cuando decidimos la publicación de un sitio una parte importante de ello es tener en cuenta dónde lo alojaremos, obtener el lugar indicado, es cuestión de una pequeña investigación y tener claro lo que necesitamos. Básicamente tenemos dos opciones f
    (tags: hosting)
  • Zona Firefox: Concurso de promoción de extensiones de Firefox
    Hace unos días la gente de SpreadFirefox lanzó un Concurso de promoción de extensiones con el fin de promocionar la capacidad del navegador mediante la incorporación de extensiones. Al principio pensé que solo sería en inglés, pero luego avisaron d
    (tags: firefox extensions)

Similar Posts

links for 2006-12-20

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

links for 2006-12-06

ByLuis

links for 2007-01-16

ByLuis