Unidad 13. Posicionamiento. Flexbox. Grid (XXI)



13.15. Rejilla. Grid

La propiedad display permite elegir el modelo de posicionamiento. Hemos visto el nuevo modelo de cajas flexibles que se basa en el posionamiento en una dirección (vertical u horizontal), ahora veremos un posicionamiento todavía más nuevo para un diseño en dos dimensiones tipo rejilla mediante el modelo grid. Este tiene además la posibilidad de sobreponer elementos explícitamente y controlar mejor la fusión (span) de celdas de los elementos. El modelo de rejilla no sustituye a las cajas flexibles sino que lo complementa, cada uno será más adecuado en determinadas situaciones, también podemos combinar ambos modelos. A la fecha de escribir esto, Marzo de 2018, este modelo todavía no es oficial, está en la fase final de su definición (Candidate Recommendation) y puede sufrir algunos cambios.

Para facilitar el diseño de páginas web han surgido varios framework basados en modelos de rejilla como Bootstrap o Foundation, ahora disponemos del modelo de rejilla de forma directa en CSS, aunque se pueden seguir utilizando frameworks si queremos aprocechar las potentes funcionalides que incorporan dado que también utilizan javascript. La desventaja de un framework es que necesitamos añadir archivos adicionales y estamos un poco atados a las características del estilo del framework. Si usamos la rejilla grid CSS, no necesitamos ningún archivo más y tenemos libertad total para diseñar.

En realidad el posicionamiento de rejilla o grid es similar a una tabla, al principio se usaban tablas HTML para diseñar y posicionar elementos, era una forma muy fácil de posicionar elementos para diseños sencillos, según se fueron complicando los diseños las tablas fueron abandonadas y sutituidas por elementos flotantes. Ahora con grid volvemos al concepto de tabla como posicionamiento en celdas, filas y columnas, por supuesto, en modelo grid tiene muchas más funcionalidades que las antiguas tablas HTML.

En el modelo rejilla podemos posicionar y controlar el tamaño de los elementos en dos direcciones con total precisión, el diseño se puede hacer adaptable a la anchura de la ventana sin perder su estructura, o modificándola de forma controlada. Esto es ideal para crear diseños adaptativos, que se ajustan a diferentes dispositivos, ordenadores, móviles, tablets, etc.


Enero-2019 (V 2.02)
Pág. 13.21
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.