Unidad 13. Posicionamiento. Flexbox. Grid (XXIII)

 

En este vídeo explicamos cómo crear la rejilla:Videotutorial


Una vez definidos los conceptos vamos a ver como se crean de forma práctica.

Al definir un contenedor de tipo rejilla se crea de forma implícita una rejilla, basta con añadir elementos para que se creen las celdas, filas y columnas. Sin embargo, en la mayoría de casos esto no es útil, e interesa definir el número de filas y columnas. Para ello tenemos grid-template-rows y grid-template-columns:

Filas y columnas de la rejilla, podemos definir la estructura de la rejilla de varias formas, una de las más intuitivas es la siguiente:

grid-template-columns: repeat(3, 1fr), donde indicamos tres columnas de igual anchura, abarcando todo el ancho disponible.

grid-template-rows: repeat(2, 1fr), donde indicamos dos filas de igual altura, abarcando toda la altura disponible.

Notación repeat. repeat(3, 1fr) es lo mismo que 1fr 1fr 1fr 1fr

repeat(2, 1fr 100px) es lo mismo que 1fr 100px 1fr 100px

50px repeat(2, 1fr 100px) 75px es lo mismo que 50px 1fr 100px 1fr 100px 75px

En los ejemplos que vamos a ver a continuación la rejilla flexible tiene fondo gris y los elementos o celdas de la rejilla tienen fondo amarillo con borde punteado, todo dentro de un contenedor div con fondo blanco de 400x200px. :

 

Ejemplo: Si escribimos este código para definir la rejilla:

display: grid; grid-template-columns:  repeat(3, 1fr); grid-template-rows:  repeat(2, 1fr);

Y dentro de la rejilla escribimos 6 contenedores div con un texto, estos se irán colocando en cada celda libre, uno a continuación de otro, este es el código (salvo los colores de fondo y bordes)

<div>celda 1.1 </div>
<div>celda  1.2 Lorem </div>
<div>celda  1.3 Lorem </div>
<div>celda 2.1 Lorem </div>
<div >celda  2.2 Lorem ipsum dolor sit </div>
<div>celda  2.3 Lorem ipsum </div>

Obtenemos la siguiente rejilla de 3 columnas y 2 filas.

celda 1.1
celda 1.2 Lorem
celda 1.3 Lorem
celda 2.1 Lorem
celda 2.2 Lorem ipsum dolor sit
celda 2.3 Lorem ipsum

El valor nfr define una fracciones del espacio disponible, n es un número entero que indica cuantas fracciones se toman del espacio disponible, 1fr, 2fr, 3fr, tenemos 6 fracciones en total, la primera tomara una fracción, la segunda, dos y la tercera, tres. De esta forma se adapta al ancho de la pantalla.

El valor auto hace que el tamaño se ajuste al contenido, con lo cual las filas o columnas podrán tener diferente anchura o altura dependiendo del contenido de cada elemento.

El valor auto-fill hace que el número de columnas se ajuste al contenido, con lo cual habrá diferente número de filas y columnas. Se suele combinar con minmax(150px, 1fr) para fijar los tamaños máximos y mínimos, como veremos en un ejemplo un poco más abajo.

También podemos dar un valor de distancia (px, em, %,...) a la anchura y altura de las filas y columnas. Por ejemplo,

grid-template-columns: 70px 1fr 2fr, donde indicamos tres columnas de distinta anchura, la primera de 70px la segunda de una fracción del ancho disponible y la tercera de dos fracciones del ancho disponible. Es decir la tercera columna tendrá el doble de anchura que la segunda columna.

grid-template-rows: 1fr 2em 50px donde indicamos la primera fila de una fracción de la altura disponible, la segunda fila de 2em de altura y la tercera fila de 50 px de altura.

display: grid; grid-template-columns:  70px 1fr 2fr; grid-template-rows:  1fr 2em 50px ;

Obtenemos:

celda 1.1
celda 1.2
celda 1.3
celda 2.1
celda 2.2
celda 2.3
celda 3.1

En este caso, aunque hemos definido 9 celdas, como sólo hemos escrito 7 contenedores div, las dos últimas celdas están vacias.

En este vídeo explicamos cómo definir de forma dinámica de las columnas de la rejilla, auto-fill:Videotutorial

grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); así indicamos que se creen tantas columnas como sean necesarias para cumplir con el siguiente parámetro minmax, que en este ejemplo fija un mínimo de 150px de anchura y un máximo del espacio disponible. El número de filas no es necesario indicarlo ya que variará según el espacio disponible. Por lo tanto, en este ejemplo, se crearán tantas columnas como quepan para tener elementos de 150px de anchura, el número de filas dependerá de la anchura total disponible.

Este sistema es un diseño adaptativo que no sólo varía el ancho de las columnas, sino también el número de columnas. Puesto que el número de filas es variable debemos tener la precaución de reservar el espacio vertical suficiente para que no se superpongan partes de la página, normalmente basta con definir los contenedores variables o si son fijos, calcular el espacio necesario.

display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); 

Obtenemos:

celda 1.1
celda 1.2
celda 1.3
celda 2.1
celda 2.2
celda 2.3
celda 3.1

Enero-2019 (V 2.2)
Pág. 13.23
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.