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