Usando CSS Grid: Posicionando elementos

Al usar CSS Grid, es probable que necesitemos que algun elemento inicie y termine en un lugar especificio, y no en el lugar que se pone por default. Para hacer esto hacemos uso de grid-start y grid-end, indicando las posiciones donde inicia y termina el elemento, teniendo de ejemplo la siguiente estructura: < div id=”content”> < div class=”uno”>lorem </div> < div class=”dos”>2 </div> < div … Continúa leyendo Usando CSS Grid: Posicionando elementos

Usando CSS Grid: Filas

Continuando con CSS Grid, ahora vamos a ver como hacer uso de las filas. Si queremos darle la misma altura a todas las filas podemos usar: #content { … grid-auto-rows:200px; } Pero va a ignorar el contenido del div, lo que puede causar que no quepa. Para evitar esto podemos hacer uso de el método minmax de esta forma: grid-auto-rows:minmax(200px,auto); Lo cual indica que las … Continúa leyendo Usando CSS Grid: Filas

Usando CSS Grid: Columnas

Una de las mas interesantes funciones de CSS es el poder crear grids, aca te explico como hacerlo facilmente: Lo primero que se necesita es un div que funcione como placeholder para la grid, por ejemplo: < div id=”content”> < div class=””>1 </div> < div class=””>2 </div> < div class=””>3 </div> …etc… </div> Y ahora podemos declarar que vamos a usar ese div como un … Continúa leyendo Usando CSS Grid: Columnas

Cambiando la altura de un iFrame automaticamente

Cuando usamos iFrames en HTML hay algo bastante incomodo cuando el contenido varia su tamano cada que se carga. Para solucionar eso podemos hacer un pequeno script que cambia el height del iFrame cada vez, dependiendo del contenido, para lo cual solo necesitamos la siguiente funcion: < script> function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + ‘px’; } Despues, a la hora de usar el iFrame, … Continúa leyendo Cambiando la altura de un iFrame automaticamente