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 filas tengan una altura de 200px pero en caso de que haya una donde el contenido haga que sea mas alta, aplique la altura de ese elemento automáticamente.

Si queremos indicar la altura de cada una de las filas que tenemos, lo podemos hacer de esta forma:

 grid-template-rows:250px 100px 400px;

En el cual también podemos usar repeat de la siguiente forma:

 grid-template-rows:repeat(3, 250px);

Lo cual nos da 3 filas de 250px de altura cada una. Tambien podemos usar repeat en conjunto con minmax para tener algo como:

 grid-template-rows:repeat(3, minmax(100px, auto));

Lo cual nos da 3 filas con una altura mínima de 100px pero en caso de que el contenido sea mucho, la altura sera la de ese elemento automáticamente.

Es importante saber que la mayoría de las veces no se indica la cantidad de filas que va a haber, si no que se crean automáticamente dependiendo de la cantidad de contenido existente.

Para agregar espacio entre los elementos de la grid podemos usar grid-gap de esta forma:

 grid-gap: 5px;

Si queremos que el espacio este unicamente entre columnas o filas podemos usarlo de esta forma:

 grid-column-gap: 5px;
 grid-row-gap: 5px;

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s