💙 Tutorial Primeros pasos creación web con Html5 y Css3 Dreamweaver Ilustrator CIPSA Lara Acebes
15
julio
2021

Tercer video/artículo de la serie Desarrollo de un sitio web paso a paso con HTML5 y CSS3: Sistemas de estructura CSS. Cuándo utilizar flex y cuándo grid. Generación de contenidos y estilos de la página index del sitio utilizando los sistemas flex y grid en función de lo que sea más apropiado.

Si no has visto el segundo video/artículo de la serie, visítalo en este enlace: Desarrollo de un sitio web paso a paso con HTML5 y CSS3: Crear la Plantilla de Dreamweaver para el sitio web

La evolución en los sistemas de estructura nos ha llevado a pensar que un sistema sustituye al anterior, pero en el caso de flex y grid no creo que sea así. De hecho, pienso que juntos son más potentes y que se complementan a la perfección.

Es cierto que en ocasiones puedes hacer lo mismo con un sistema u otro, por lo que la lógica nos invitaría a optar por el sistema más moderno. Sin embargo, con Flex puedes hacer cosas que con Grid no y viceversa. Puedes tener un contenedor con propiedad display: flex y que sus hijos tengan valor grid y a la inversa.

Conoce todas las propiedades que te ofrecen estos sistemas con nuestro Máster en Programación Web

Estructura de una o dos dimensiones

La principal diferencia entre Grid y Flex es que con Grid puedes colocar elementos en dos dimensiones, columnas y filas a la vez, mientras que con Flex solo puedes manejar una dimensión, tienes que elegir entre filas o columnas. Por ejemplo, es el caso del menú que explico en el video:

Si me decidí por flexbox es porque los elementos están situados únicamente en dirección horizontal, uno al lado del otro, algo que con flexbox es fácil de conseguir.

desarrollo web paso paso html5 css3 sistemas estructura css flex grid 2

Por otro lado, si lo que quieres es construir una estructura más completa compuesta por filas y columnas con elementos en distintas posiciones, podemos combinar grid con flex para lograrlo. Por ejemplo:

desarrollo web paso paso html5 css3 sistemas estructura css flex grid 3
desarrollo web paso paso html5 css3 sistemas estructura css flex grid 4
desarrollo web paso paso html5 css3 sistemas estructura css flex grid 5

Me he decidido por el sistema flex para utilizar la propiedad order en el media query:

desarrollo web paso paso html5 css3 sistemas estructura css flex grid 6

Y obtener este resultado:

desarrollo web paso paso html5 css3 sistemas estructura css flex grid 7

Aprende a desarrollar sitios web creativos y adaptable, visita nuestros cursos de Diseño y Desarrollo Web

Estructura basada en el contenedor o en los contenidos

Hay otra forma de decidir si es mejor utilizar flex o grid para una estructura.

Flex trabaja desde el contenido. Un caso de uso ideal para flexbox es cuando tienes un conjunto de ítems y quieres espaciarlos uniformemente en un contenedor. Dejas que el tamaño del contenido decida cuánto espacio ocupa cada ítem. Si los ítems se pasan a una nueva línea (wrap), calcularán su espaciado basándose en su tamaño y el espacio disponible en esa línea. Es lo mejor para colocar los contenidos que queremos que se vayan adaptando al responsive por ellos mismos.

Veamos un ejemplo.

Coloco 5 elementos dentro de un layout flex con propiedad wrap. A los ítems les indico que ocupen la misma proporción de espacio y tengan 400px de ancho por defecto.

desarrollo web paso paso html5 css3 sistemas estructura css flex grid 8
desarrollo web paso paso html5 css3 sistemas estructura css flex grid 9

Cuando la resolución de la pantalla sea de 1200px o más, podrán colocarse 3 items en la misma línea repartiéndose el espacio a partes iguales.

desarrollo web paso paso html5 css3 sistemas estructura css flex grid 10

Cuando la resolución sea entre 1199px y 800px, pasarán a colocarse de dos en dos repartiéndose el espacio nuevamente a partes iguales y, en caso de que haya un número impar de ítems, el último ocupará el ancho total.

desarrollo web paso paso html5 css3 sistemas estructura css flex grid 11

Y cuando la resolución baje de 800px, se colocarán de uno en uno.

desarrollo web paso paso html5 css3 sistemas estructura css flex grid 12

Vemos que los 400px de la propiedad flex realmente actúa como un min-width.

Si quieres conocer más del sistema flex, visita nuestro Curso de CSS3

Grid funciona desde el contenedor hacia dentro. Cuando usas Grid los elementos se colocan en las celdas de la cuadrícula de acuerdo con la estructura que hayas hecho.

Observa el siguiente ejemplo de estructura. La grilla de la que se parte sería la siguiente:

desarrollo web paso paso html5 css3 sistemas estructura css flex grid 13

Este sería el modo en que se colocaría la estructura en resolución móvil:

desarrollo web paso paso html5 css3 sistemas estructura css flex grid 14

Este es el html:

desarrollo web paso paso html5 css3 sistemas estructura css flex grid 15

Y este el css:

desarrollo web paso paso html5 css3 sistemas estructura css flex grid 16

Siguiendo el sistema movil first, se coloca el contenedor con sistema grid y se divide en 5 filas y 3 columnas.

Las 3 columnas se unen en una con grid-template-columns: 100%. Los valores en pixeles que he aplicado a las rows serían equivalentes al supuesto contenido de cada zona. Observa cómo la unidad fr toma el resto de la altura.

Esta sería la vista para tableta:

desarrollo web paso paso html5 css3 sistemas estructura css flex grid 17
desarrollo web paso paso html5 css3 sistemas estructura css flex grid 18

Se modifican las propiedades grid-template para pasar la estructura a 2 columnas y 4 filas y se reorganizar las template-areas.

Y para las resoluciones de escritorio hacemos el último cambio:

desarrollo web paso paso html5 css3 sistemas estructura css flex grid 19
desarrollo web paso paso html5 css3 sistemas estructura css flex grid 20

Nuevamente, modificando las propiedades grid-template paso la estructura a 3 columnas y 3 filas y reorganizo las template-areas.

Si quieres conocer más del sistema grid, visita nuestro Curso de CSS3

En el siguiente artículo os hablaré de cómo optimizar la css. Y podrás ver el cuarto video de la serie.

Video 4

  • Desarrollaré las páginas Productos y Marcas. Estas páginas comparten la estructura de la index, por lo que sólo necesitaré añadir estilos estéticos al contenido propio de cada página.

Video 5

  • En este video plantearé otra estructura grid para la página Nosotros.

Video 6

  • En la página Contacto nuevamente desarrollaré una estructura grid.

Video 7

  • En este video me centraré en añadir efectos CSS3 de transición y animación.

Video 8

  • En el último video generaré el media query para la adaptación al dispositivo móvil
Author

Lara Acebes

Profesora de Diseño Gráfico y Diseño Web. Front-End, HTML5, CSS3, Suite, Photoshop, Illustrator, Indesign.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Recibe de primero nuestras ofertas de empleo y noticias