Similar Posts

|

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

Jing: capturas en tu web

ByLuis

jing.pngJing es una aplicación de Windows y Mac que permite capturar imágenes y vídeos de nuestro escritorio y los sube a internet, copiando en el portapapeles la url final para nosotros pegarla en nuestra web.
Una herramienta muy útil si queremos realizar documentación o tutoriales. En las imágenes permite insertar flechas y texto, y los vídeos muestran con claridad las acciones que se realizan.
Tanto los vídeos como las imágenes se alojan en screencast.com, disponiendo todos los usuarios 200Mb de alojamiento.
Jing
Vía / WebAppers

links for 2007-03-16

ByLuis

links for 2007-02-06

ByLuis