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

links for 2006-11-28

ByLuis

links for 2006-11-29

ByLuis
| | |

Laboratorio: marcar búsquedas de Google

ByLuis

Algo que suele ser interesante es cuando realizamos una búsqueda en Google, que en la página a la que accedemos desde los resultados de Google, nos resalte las palabras que hemos buscado, aunque la barra de Google ya te da la oportunidad de hacerlo.

El proceso es sencillo, tenemos que capturar la URL desde la que nos llaman, dada por $_SERVER[‘HTTP_REFERER’], obtener las palabras que hemos puesto a buscar el Google (vienen en el parámetro q) y después capturar la salida, como se realizaba en el caso de la caché, y cuando tenemos lo que vamos a enviar por la salida, sustituir cada una de las palabras por el código HTML que queramos que resalte la palabra en cuestión.

<?php
// Filtro para el array para quedarnos solo con la QUERY
function filtro($val) {
return strpos($val, 'q=') === 0;
}
// Obtenemos la página desde la que nos llaman
$url = $_SERVER['HTTP_REFERER'];
// Nos quedamos solo con los parámetros
$url = parse_url($url);
$url = $url['query'];
// Nos quedamos solo con el parámetro que nos interesa
$parametros = split("&", $url);
$cadena = array_filter($parametros, "filtro");
$cadena = urldecode(substr(array_shift($cadena), 2));
// Cacheamos la salida
ob_start();
?>
...
Página HTML
...
<?php
// Recuperamos el buffer de salida
$html = ob_get_clean();
// Por cada palabra de la cadena de búsqueda, la sustituimos por el HTML necesario para resaltar
$palabras = split(" ",$cadena);
foreach ($palabras as $palabra) {
$html = preg_replace('/('.$palabra.')/i', '<b>$1</b>', $html);
}
// Mostramos el buffer por la saliad
echo $html;
?>

Código