Unidad 13. Posicionamiento. Flexbox. Grid (XXVI)



13.17. Fusionar celdas

Igual que sucede con las tablas HTML, en una rejilla podemos fusionar cedas contiguas. En las rejillas a estas zonas se les llama áreas. Para ello disponemos de la palabra clave span, que indica cuantas columnas se extiende hacia la derecha, o cuentas filas se extiende hacia abajo. Por ejemplo: grid-column: 2 / span 2; indica que el elemento empieza en la columna 2 y se extiende por dos columnas hacia la derecha. También podemos indicar que un elemento se fusione con las celdas contiguas con la notación de lineas, grid-column: 2 / 4; que indica que la ceda empieza en la línea 2 y acaba en la línea 4, por lo tanto, ocupa dos columnas.

Para que se vea mejor la fusión de celdas vamos a definir una rejilla (4x4) con todas las celdas iguales grid-template-columns: repe at(4, 1fr); grid-template-rows: repeat(4, 1fr)

Ahora definimos el primer div como grid-row: 1; grid-column: 2 / span 2; que produce la fusión de las celdas 1.2 y 1.3

Para logar una fusión similar utilizando la notación de líneas, definimos el segundo div como grid-row: 2 / 3; grid-column: 2 / 4; Fusión de celdas 2.2 y 2.3

Para fusionar varias celdas de múltiples filas y columnas, utilizando la notación con span grid-row: 3 / span 2; grid-column: 2 / span 3; obtenemos un área con las celdas 3.2, 3.3, 3.4. 4.2, 4.3, 4.4. fusionadas.

<div style="display: grid; grid-template-rows:repeat(4, 1fr); grid-template-columns: repeat(4, 1fr) ">       
<div style=" grid-row: 1; grid-column: 2 / span 2;">Fusión de celdas 1.2 y 1.3</div>
<div style=" grid-row: 2 / 3; grid-column: 2 / 4; ">Fusión de celdas 2.2 y 2.3</div>
<div style="grid-row: 3 / span 2; grid-column: 2 / span 3;">celdas 3.2, 3.3, 3.4. 4.2, 4.3, 4.4. fusionadas</div>
</div>
Fusión de celdas 1.2 y 1.3
Fusión de celdas 2.2 y 2.3
celdas 3.2, 3.3, 3.4. 4.2, 4.3, 4.4. fusionadas

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






Página inicial  Cursos Informática Gratuitos

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


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