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>

 Cursos Informática Gratuitos