 Hola, bueno, ya estoy aquí otra vez, que me he caído, no me he hecho daño, pero sigo aquí, sigo viva. Bueno, Vicen, decirte adiós, que no termino, me voy a despedir de ti. Muchos besos y espero que ahora estés disfrutando de la saga de networking en el Zoom, hablando con los asistentes. Y ahora vamos a ver, voy a presentar, tengo el honor de presentar a Mauricio Gelves, que es un gran amigo. Licenciado en informática, trabaja como consultor web, freelance en su marca personal, mougelves.com, es gran envasador de SiteGround y ha sido oponente múltiples work camps en España, alrededor de todo el mundo. Es una persona multidisciplinar, hace de todo, aparte de la informática. Es un apasionado de la música, de los viajes, actividades que disfrute, comparten con artículos, podcasts, fotografías, muchísimas, que le encanta hacer foto y sobre todo vídeo. Podéis encontrarle en su web y le podéis encontrar también en todas sus perfiles de redes sociales. Para mí es un honor, Mau, presentar de hoy aquí en la primera work camp en español online. Y os dejo con él y su ponencia sobre Flexbox y Grid, los mejores amigos de los maquetadores. Recordad porfa el tema de las preguntas al final de los últimos 5 minutos que le queden de la charla para luego compartirlas con él, ¿vale? Mau, suerte. Obviamente, muchísimas gracias. El honor es mío que me presentes tú. Así que es genial y muchísimas gracias a todos los organizadores por haber organizado este pedazo de evento que está llegando, no solamente a España, sino a toda la gente de Latinoamérica, algo que hemos deseado durante muchísimos años. Bueno, hoy voy a explicarle Flexbox y Grid. Es una tecnología nueva, esto ya tiene bastantes años en la tecnología del mundo web. Pero sí que es verdad que hay mucha gente, inclusive profesionales, compañeros, que me dicen que aún no se han metido en esta tecnología porque tienen cierta complejidad. Así que espero que a través de esta charla estas ideas queden un poco más claras y las puedan empezar a implementar un poco más en sus proyectos. No me voy a presentar porque ya lo he hecho muy bien, Carla. Mi nombre es Mauricio. Bueno, soy licención informático y embajador de marcas de Cygron y me pueden encontrar en todos esos lugares, como Mau Gervais. Vamos directamente al tema que me incumbe porque son muchos lo que tenemos que ver y poco el tiempo. ¿Qué vamos a ver en esta charla? Primero una pequeña historia de Internet, muy rápida, no lo vamos a detener mucho en ello. Los pequeños tropiezos o pequeños aprendizajes que hemos tenido a lo largo de toda esta historia de Internet. Yo le llamo la era pre-flex Grid. Vamos a ver una pequeña introducción a Flex y Grid y en simultáneo lo vamos a ir viendo con distintas demos. Demos que son vídeos para no estar picando código en vivo y de esta manera ahorramos bastante tiempo. Así que vamos a ello. Como hemos llegado aquí, en el año 91 el científico en ciencias de la computación Tim Berners-Lee crea esta primera página web. Esto fue el 6 de agosto de 1991. Como pueden ver es una página web, un HTML súper simple que solamente tiene texto y links, nada más. Pero está tan bien hecha, está tan bien hecha que si le hacemos correr los tests llega a una performance de 1999. Y me creo que mucho de lo que estamos aquí, sentimos envidia de este número porque no todos tenemos este valor. Así que es performante, se veía no tan guay pero carga súper rápido. Pero ¿qué es lo que ha pasado? 6 años después de primera página web sale lo que es el primer documento que define lo que sería las hojas de estilo. Las plantillas de hoja de estilo encascadas en nivel 1, que sería una serie bueno de con dos valores atributos propiedades que darían una cierta estética a estas páginas web que en un principio eran bastante simples. ¿Cuáles fueron los tropiezos o de qué maneras hemos ido aprendiendo a lo largo de todo internet? Primero hemos abusado muchísimo de las tablas, lo que yo llamó los table titties. Para ello voy a poner un ejemplo de la película Space Jam, no sé si se acuerdan en el año 1996 una película en la que estaba Michael Jordan con todos los personajes de la Warner Bros. Era una peli muy avanzada para épocas en efectos especiales y obviamente la página web tenía que estar a la altura. Así que esta página que estamos viendo la he sacado de archive.org porque es url que está ahí ahora visible. No existe más parece la Warner, lo ha decidido quitarla. Pero en archive.org todavía se puede encontrar. Y si vamos al código de esta página web podemos ver que todo está hecho con tablas. Ahí estamos viendo filas, columnas, ¿sí? Una página bueno que para la época está súper bien, pero todo se realizaba con tablas. Esto es lo que yo llamo la table titties, esta primera fase de desarrollo de frontend por la que hemos pasado. La segunda fue la flagitties, aquí ya directamente se nos fue la cabeza, se nos vino el futuro encima y Adobe creo este tipo de páginas webs. Esto es una plantilla y es una página real, pero no sé si lo podrán ver bien la animación. Pero fíjense lo que es eso, botones que aprecen que vienen del futuro. Miren esta animación que se despliega, seguida fantástico para la época. Pero ¿qué pasa? Esto es cerrado, no podemos ver el código. Es como un producto cerrado que Adobe hizo en su momento y que gracias a Steve Shops de no permitir que este tipo de contenido estuviera o se pudiera renderizar en los iPhones y demás artefactos, estos dispositivos, perdón. Bueno, ha hecho que esta tecnología haya caído un poco en desuso, afortunadamente. La tercera que vamos a ver es la dvd, porque ya maquetar en tablas estamos un poco fuera de modo. Nos hemos pasado a los dips, dips para todo y así éramos frontenders más guais. Por ejemplo, teníamos dips para el header, para el content, para el footer, para el logo, dips para la navegación, para absolutamente todo. Esto semánticamente es horrible, pero bueno, lo hacíamos de esta manera. El siguiente paso fue el float liftitis. El float liftitis era el abuso excesivo de utilizar float lift para poder generar estructuras en nuestras páginas web. Tengo un pequeño ejemplo, aquí un diseño muy simple, tenemos un H1, el título de sección lo poníamos de esa manera, el párrafo lo pintábamos con un P, pero aquí teníamos tres imágenes, uno al lado de la otra, que la solucionábamos, ahí tenemos la imagen, con el estilo float lift. Y para solucionarlo, para dar el salto de página ponemos un nuevo diff con el clear blow. Esta técnica la explotamos a máximo y a veces generaban bastantes dolores de cabeza. Por último, tenemos el bootstrap titties. A esto me refiero al uso desmedido de los distintos frameworks que existen para poder maquetar páginas web. Por ejemplo, primero que yo utilicé en su momento era 960, se llamaba así porque era el ancho que definía 960 píxeles, pero también existen más conocidos como bootstrap, desde donde he sacado el nombre, bootstrap titties, o foundation, que es uno de los más conocidos en el día de hoy. No está mal utilizar estos frameworks, pero hay que tener en cuenta de que consumen o que hay que utilizar muchísimo código, muchísimo markup HTML para hacer cosas muy simples. Un ejemplo, aquí vemos como una pequeña tabla que tiene una tabla interior con dos columnas. Fíjense todo el HTML que hay que escribir para hacer esta estructura tan simple. Se lo pongo un poquito más grande. Fíjense todo el HTML que hay que escribir, para hacer esa simple estructura. Se lo pongo un poco de la mano, claramente. Para solucionar todos estos problemas, todo este aprendizaje que hemos tenido a lo largo de internet, tenemos dos grandes tecnologías. La primera que salió fue Flex y mientras se iba trabajando en Grid. Ya veremos cuál es cada una. Y para poder explicar esto con un poquito de ejemplo, ya estamos viendo aquí una gráfica. Estamos hablando del artista Piet Mondrian, que era un vintor de Holanda que hizo todo este tipo de arte en el que vemos un montón de artángulos cuadrados con colores básicos y líneas en negro. ¿Pero qué tiene que ver Piet Mondrian con Flex y Grid? Bueno, este hombre se hizo famoso para hacer esta pintura que yo sé que más de uno diciendo que eso lo puedo pintar, yo lo puedo pintar mi niño. Pero bueno, esto no pasa con muchos artísticos, pero nunca lo hemos pintado, nunca lo hemos hecho nosotros. Lo importante de Piet Mondrian es cuando lo hizo. Piet Mondrian nació en el siglo XIX, pero se hizo famoso a principios del siglo XX, una época en la que existía el diseño victoriano. Este diseño victoriano no solamente se aplicaba a las gráficas que vemos aquí, sino que también estaba en arquitectura, literatura y demás. Y se llamaba victoriano porque simplemente durante el reinado de la reina de Victoria en Gran Bretaña. Como podemos ver, es un diseño muy cargado con muchos colores, con muchos retoquecitos en todos lados. Aquí vamos a ver otro ejemplo de la marca Heinz. Y otro más, espero que lo estén viendo bien. Y esto es lo que yo llamaría los flashities, divitis, table titties y vostra pitismos. Un montón de información para poder mostrar un mensaje. Sin embargo, Piet Mondrian vino con este tipo de arte mucho más simple, con los colores básicos, el amarillo, el rojo y el azul. Y es lo que yo hago la comparación con lo que sería el gris y el flex de hoy en día. Un cambio muy drástico y que nos permite tener muchísimo control de la situación. Bien, vamos a empezar con qué es flex. Primero, si que toda esta información la he conseguido a través de esta página de YouTube, en realidad he aprendido a utilizarlo gracias a los distintos vídeos que ha hecho Genzimos. Genzimos es diseñadora y desarrolladora de Mozilla y también está trabajando activamente en lo que son los estándares de CSS en la calidad. Lo explica súper bien gracias a ella y a la página de CSS Tricks. He aprendido y he conocido los atributos de las propiedades básicas de estas dos tecnologías para poder tener la soltura a la hora de diseñar mis páginas web. Así que los ejemplos que vamos a ver, mucho los he aprendido gracias a esta señora. Para ver todos los ejemplos y cómo funcionan estas dos tecnologías, he diseñado este pequeño HTML, es un simple contenedor y un montón de divs internos que forman las distintas cajitas que vemos ahí que van del 1 al número 10. Lo que sería flex en un principio sería flex, vamos a tener el control del flujo de cómo se renderiza todos los elementos dentro de un contenedor. Puedo repetir, vamos a tener el control de cómo se renderiza el flujo de todos los hijos dentro de un contenedor. De izquierda derecha, de derecha izquierda y hacia arriba y hacia abajo y viceversa. Vamos a pensar a poco. Vamos a comenzar con este simple contenedor, ahí vemos el código. Le decimos que es un display flex. Seguí el contenedor, esto es lo principal. Y bueno, le ponemos un borde de cinco píxeles con guiones de color negro. Lo que ahora vamos a hacer es que a cada una de las cajitas internas que hemos visto en el código anterior, lo vamos a poner un color de borde, un alto y un ancho de 100 píxeles. Es decir, las formas van a ser cuadradas. Pero vemos que esto se renderiza y nos deja un rectángulo desde uno hasta el quince. Aquí tenemos un problema, tendrían que ser cuadrados. Sin embargo, lo vemos en forma de rectángulos. Básicamente, para poder respetar este tamaño de cada uno de sus hijos, tenemos que agregar el atributo flex. ¿Qué significa? Mira, contenedor flex. Si vemos que sus hijos llegan hasta cierto límite y no hay más espacio, tú no te preocupes y lo que sobre lo pones en una nueva línea. Y efectivamente, ahí hemos reducido a diez bloques solamente, llega hasta el ocho, que sería el ancho que tiene y el nueve y el diez lo pone por la línea de debajo. De momento no nos preocupemos por esos espacios en blanco que están ahí, porque ya vamos a ver cómo podemos solucionarlo. Esta es la propiedad que vamos a utilizar, es Justify Content. A partir de ahora, vamos a decirle a este contenedor flex cómo podemos justificar los elementos que están dentro. Si decimos que los justifique con flex start, tal como está ahora el display flex, flex start sería la línea el borde que está a la izquierda. Efectivamente vemos como todos los bloques se desplazan hasta la izquierda. Pero si decimos flex end ya vamos a recordar las palabras claves flex start, flex end todo sería para la derecha como es de esperar. Genial, y si le decimos space between vamos a justificar con el espacio que hay entre los elementos hemos reducido nuevamente así los bloques para que podamos ver que agrega un espacio entre todos elementos calculado automáticamente por el navegado. Ahora vamos a ver un pequeño ejemplo en vivo, dinámico, espero que se pueda ver bien a través del streaming. Vamos viendo ahí un ejemplo en la página Codepen que nos permite agregar HTML, CSS y ver rápidamente el resultado. Vemos ahí cómo se va calculando automáticamente el espacio entre todos los elementos. Bien, el siguiente que vamos a ver es el space around. Vamos a justificar todos los hijos pero con el espacio que hay entre ellos. Aquí hay algo particular que es que el primer elemento y el último elemento tendrán la mitad del espacio de los espacios interiores. Si vemos ahí ese espacio en blanco del primero y el último, es exactamente la mitad que los espacios que tenemos en el medio. Veamos el ejemplo nuevamente, dinámico vamos viendo ahí cómo se va generando información entre todos los elementos. Este es el space around. El siguiente que vamos a ver es el space evenly que significa como bueno, yo quiero que todos los espacios sean equitativos. De esta manera el navegador que sea distribuye todos los elementos de una forma equitativa dentro del contenedor. Ahora sí vemos que todos los espacios en blancos tienen exactamente el mismo tamaño. Como lo vemos aquí en forma dinámica. Sí, vemos que una vez que ya llega al final que no hay más espacio directamente mueve lo que a la fila interior. Y ahí tenemos el espacio en forma equitativa entre todos los elementos. Bien, ahora vamos a trabajar con la propiedad de alineación. Ya hemos trabajado un poco en la forma horizontal. Ahora vamos a ver en la forma vertical cómo podemos trabajarlo. Agregamos la propiedad Align Items que podemos decirle FlexStart o el que lo hemos hecho en el paso anterior y esto lo que va a hacer es que todos los elementos se van a alinear al eje superior. Vale, al borro superior. Al como está ahora el Display Flex porque luego podemos cambiarlo, pero de momento no quiero marearlos demasiado. Lo mismo, si indicamos que es del tipo FlexEn, todos los elementos irán a la parte inferior del contenedor. Y uno que es muy importante es el Align Items Center como pueden estar reduciendo seguramente pondrá todos los hijos en el centro del contenedor. Justo en el medio. Fíjense que tenemos hijos de distintos tamaños sin embargo los posiciona como si hubiera un eje invisible ahí en el medio y los mezcla todos. Vamos a poner un ejemplo. Aquí el señor Piet Mondrian nos pide un pequeño proyecto o nos da un diseño que nos dice, mira, ahora tengo solamente este pequeño cuadradito rojo que está centrado justo, verticalmente y horizontalmente. Todos los Frontenders que me estén mirando antes de era flex y grid se acordarán las Triggy Newells y los Tweaks que hacemos para poder hacer un diseño tan simple como este. Centrar horizontalmente y verticalmente algo era una tarea bastante ardua. Utilizábamos un top 50% translate y griega minus 50. Bueno, era una cuestión de dos o tres o cinco líneas para poder centrar algo y hacer algo tan simple como esto. ¿Cómo podemos hacer esto con Flex? Tenemos que decirle primero que la propiedad que todos los ítems estén alineados al centro sería en la forma vertical y en la forma horizontal Justify Content Center. De esta manera tendríamos, bueno en este caso es unijo solamente pero si tuviéramos más elementos estarían centrados tanto vertical como en forma horizontal. Lo vemos aquí en el ejemplo vemos que ahí tenemos los dos ejes, voy a ir jugando con los dos para que veamos que el cuadrado número uno se mantiene siempre en el medio. Ya lo vemos en forma vertical y en forma horizontal. Un minutito. Vuelvo a repetir, esto antes de la era Flex y Grid era bastante, bastante dolor de cabeza con lo cual estoy súper agradecido a CSS3 y a toda esta gente que piensa y genera todas estas estandarizaciones y sobre todo los navegadores que lo implementan. Muy bien, siguiente ejemplo, tenemos otra posibilidad de alinear, aquí vemos que todos los hijos tienen distintos tamaños pero si agregamos el Align Items Stretch, lo que va a hacer es no respetar ese alto y hacer que todos los hijos tengan el tamaño del contenedor que en este caso como vemos ahí en el código es de 200 píxeles. Otro punto muy importante es podemos decirle mira, tú alineas los todos al centro como vemos en el contenedor haz que todos los espacios en blanco se estén equitativamente iguales pero podemos modificar un hijo en particular con lo cual ya tenemos propiedades que atacan en forma general de contenedor y después tenemos algunas propiedades que van directamente hacia uno de los hijos, como lo acabamos a ver ahora, el Align Self. O sea, a mí no me importa como el contenedor diga que todos los hijos estén alineados yo quiero que a mí me alines en el FlexStart y si muchos estarán deduciendo bien todos estarán en el centro a la excepción del hijo 3 que se irá al FlexStart del contenedor. Genial. Ahora sí vemos lo de que podemos girar los ejes, ¿vale? Tenemos que el contenedor es del tipo Flex, de momento se ha utilizado el FlexDuration que viene por defecto pero lo que podemos hacer ahora es hacer un rowRivers, ¿vale? El por defecto es el rows pero si hacemos un rowRivers lo que va a ser automáticamente alternar los ejes donde estaba el FlexEnd ahora es el FlexStart y viceversa, ¿vale? Con lo cual hay que acordarse de eso para cuando especificamos esos valores en los atributos y lo bueno que tiene esta propiedad es que no hemos tenido que cambiar el orden de nuestro HTML ya empezamos a ser libre del markup del mercado de HTML si podemos ahí escribir lo que nosotros queramos que ya después con CSS y lo veremos con gris también como podemos alterar el orden de estos hijos sin tener que cambiar absolutamente nada o a las niñas que deseamos de copiar dos distinto y mostrar uno u otro según el caso no hay necesidad de hacer eso ahora con Flex no tiene más excusa otra posibilidad en vez de fila el Flex tenga dirección de columna con lo cual lo mismo, mismo marcado pero cambiamos la forma en que se muestran los hijos y obviamente tenemos el columnRivers que daría vuelta los ejes acuérdense donde estaba FlexEnd ahora está FlexStart y viceversa un ejemplo esta es una de las primeras páginas web en el año 2016 es la página de Seishu.es está toda hecha con Flex si la haría hoy, la haría con Grid pero en ese entonces todavía Grid no ha estado muy avanzado en los navegadores con lo cual está toda hecha con Flex súper bonita la página, me gusta cuando los clientes hacen buen contenido con buena fotografía porque se luce bien si la pueden ver, Seishu.es está toda hecha con Flex seguimos adelante que es Vid, ahora sí vamos a la parte más nueva, más moderna y que nos dará mucha más libertad a la hora de hacer nuestras páginas web básicamente es esto, es una tabla no es table titties que vimos en la primera parte pero sí que es una tabla, tenemos por una parte de filas tenemos columnas y vamos a poder definir también los gaps, los pequeños ejercicios que hay entre estos dos elementos entre filas y las columnas puedo usar Grid ya en el 2020 según lo que hice la página y us, que significa si puedo usarlo cana y us, vemos que aquí tenemos un montón de navegadores, los más importantes y están casi todos en verde casi un 95% de que es compatible con todos los navegadores vemos ahí el Internet Explorer a la izquierda en un verdecito un poco más claro pero bueno ya estamos acostumbrados al Internet Explorer y afortunadamente es caso menos los usuarios que utilizan este navegador reemplazándolo por el Edge que no hay problema, que se puede trabajar tranquilamente con Grid ¿Qué podemos hacer con Grid? Podemos poner elementos como vemos aquí en una posición específica podemos poner otra podemos decir que atraviesen un gap que comience en una columna y termine en otra determinada podemos ir más allá de una fila y podemos super poner espacios esto si quitamos esta tabla de fondo lo que nos está dando es la posibilidad de poder diseñar junto con todo el resto del CCS con total libertad cualquier tipo de diseño, vamos a ver como podemos implementar Grid de una forma muy simple y espero que ya se vayan con esto aprendido lo único que hay que hacer es poner DisplayGrid a un contenedor, ya está ya con eso ya soy maquetador y sabéis programar con Grid DisplayGrid esto lo que nos va a generar es una grilla que afortunadamente ya Chrome, Firefox los navegadores más modernos cuando vemos al inspector de elemento nos muestra gráficamente la forma que tiene la grilla vamos a ir viendo algunos ejemplos tenemos una grilla, tenemos que utilizar estas propiedades Grid Template Columns y Grid Template Rows para definir el ancho o el espacio que ocuparán estos elementos aquí estamos viendo que tenemos 100 píxeles 2 FR que es una unidad nueva que implementa esta tecnología y es el acrónimo de fractional vamos a decir unidades de momento 100 píxeles, 2 unidades y 1 unidad y para las filas tenemos un 25% 100 píxeles y 2 unidades como se traduce esto visualmente bueno, aquí tenemos nuestra tabla y vemos que para la primera columna como lo vemos en el código son 100 píxeles y el resto del espacio por 100 píxeles es fijo el resto del espacio lo vas a dividir en 3 a la segunda columna le das 2 y a la tercera columna le das 1 eso es lo que significa FR fractional y lo mismo para las filas de todo el espacio de las filas el 25% será para la primera fila 100 píxeles para la segunda esa es fija y el espacio restante que da un poco igual aquí, 2 FR súper simple otra forma que podemos utilizar es haciendo uso de repeat para no tener que escribir absolutamente todas las columnas en este caso vamos a hablar directamente en el ejemplo tenemos que la primera columna es de 100 píxeles y después estamos repitiendo 3 veces 3 unidades y con respecto a las filas tenemos que de todo el espacio y después agregó 4 filas más de una unidad de una fracción esta es otra posibilidad que tenemos de definir la grilla otro punto súper importante es que a estos espacios tanto de filas como de columnas podemos asignarles nombres, aquí vemos que tenemos obviamente 4 columnas y 3 filas que hemos definido en los primeros tributos y después le vamos a dar nombre las 4 columnas las 4 columnas de arriba se llamarán header, esto no es una palabra clave son palabras totalmente aleatorias en la segunda fila vamos a ver main main un punto ese punto significa que no tiene nombre que no es nada y a la última les llamamos cybar, vuelvo a repetir, son palabras son strings, no son palabras claves las que aquí estamos asignando y por último son todos footer genial, con esto ya tenemos aquí definidos los nombres aquí vemos el punto que es un empty y el footer, genial vamos a especificar un elemento un hijo dentro de este contenedor grid para que se posicione en este lugar muy simple, si tenemos un hijo con la clase item A le decimos mira, el área en el que tú vas a estar es el header, automáticamente se posicionará en el top y si tenemos otro elemento que se llame cybar pues irá a ese espacio en azul vamos a ver lo que son los espacios los gaps que hay entre estos dos elementos, están siempre como decir mira, el gap que hay entre las columnas es de 10 píxeles y la columna que hay entre las filas es de 15 y lo que hemos hecho y te escucho Carla voy muy bien, si me queda poco te queda poco cuánto, porque estamos ahí ahí, te detiene es un par de minutillos vale, 5 minutos 4 minutos 4, 3, 3 muy rápido y aquí lo que podemos hacer con los items es iremos posicionándolos, le decimos de qué columna donde termina, aquí vemos que comienza la 1 termina la 2 y lo mismo si le decimos a la 4, vemos cómo podemos extenderlo, vale y lo vamos a decir, desde donde comienza hasta donde terminamos, lo damos como las coordenadas para ubicar los hijos la forma que también podemos hacer es decir no, mira este elemento, ocupa 3 columnas y una fila, lo aplica directamente la única diferencia es tener 2 bloques pero uno está sobre encima del otro la forma de poder super posicionar elementos es con el atributo z-index que no tiene nada que ver con flexico grid pero sí que las permite jugar con quien está delante y quien está detrás, dándole un z-index mayor, el mayor estará por encima lo bueno es que los contenedores si le decimos grid out of flow dense el disk número 3 que vemos que lo ha puesto ahí porque no tiene lugar automáticamente ocuparía ese lugar hueco que está ahí arriba, con lo cual nuevamente tenemos que despreocuparnos del html con el grid out of flow dense si hay un espacio libre y entre un hijo lo va a ubicar en esa posición un ejemplo y ya con esto voy treinando es cuando tenemos así un conjunto de elementos un grupo un cuadrado puede ser un bloque de empleados un post pero que sí vamos achicando distintos dispositivos y tenemos que ir cambiándolo con el pensamiento de antes y vamos definiendo todos los media queries diciendo que el mobile será uno en 400 píxeles serán dos este es un pensamiento muy arcaico de cómo lo hacemos con ccs fíjense en esta línea de código porque esta la utilizo, se lo juro muy a menudo con simplemente esta línea de código estamos definiendo el tamaño mínimo de cada hijo si vamos expandiendo y hay 150 píxeles extra automáticamente ubico ahí un hijo, no tengo que poner más código que eso, con lo cual tenemos algo súper súper dinámico y vamos a ver el ejemplo aquí con el html que se va adaptando el ejemplo lo ha hecho obviamente jensimos pero se lo he copiado que está genial no como podemos tener este arte en forma totalmente dinámica haciendo uso de estas dos propiedades así que flexgrid porque son importantes porque nos darán 100% de libertad a cualquier tipo de diseño que nos pase en los diseñadores y con esto sí ya termino muchísimas gracias a todo lo que han estado aquí mirando muchas gracias Mao tienes aquí mogollón de comentarios es genial profe que esto vale para un curso que no te cortemos que te dejemos todo el rato está la gente encantada me alegro mucho vamos a pasar alguna preguntilla y el resto pues ahora todos los que queráis podéis ir al canal Lezuma seguir un ratillo con Mao para preguntarle cosas teníamos una pregunta que he leído antes por ahí de Gema Grifol que preguntaba cuando estabas hablando de flex que en qué caso los podríamos aplicar en WordPress bueno en WordPress como cualquier tecnología que se trabaja en internet vale esto aplicada es tras tecnología porque es HTML CSS son las páginas CSS en realidad flex lo vas a utilizar me escucho un poco de eco flex lo vas a poder utilizar cuando tengas un montón o tengas que tener el control del flujo de un montón de hijos pero sin importar la estructura no vas a tener que definir estructuras sino como se renderiza un contenedor, un montón de hijos sin importarte como está hecho como está hecho el HTML normalmente suele ser un conjunto de bloques un conjunto de párrafos un conjunto de iconos sociales tú no vas a definir una estructura para un elemento tan pequeño pero así que puedes decir oye mira mostrame los entrados en desktop pero en mobile mostramelo de otra manera parece el caso en particular utiliza flex, sé que puedes un poco confuso a principio pero una vez que le van encontrando la chicha es súper simple luego tenemos otra pregunta ya por aquí un par más de Carlos a ver si me da que nos dice que si se puede congrid el clásico de la imagen pegada siempre a la derecha tengo el ancho que tenga a ver si me la ponen por aquí la puedes leer yo no entiendo muy bien la pregunta la verdad se puede congrid el clásico la imagen pegada siempre a la derecha tenga el ancho que tenga con el grid clásico lo entende? si se puede hacer congrid pero también lo puedes hacer con el float en ese caso se puede utilizar el float le pones un tamaño que quieras le pones el float y el texto que esté alrededor irá flutando por sobre esa imagen si lo haces con un grid tendrás que asignarlo un espacio a esa imagen y el texto o cualquier elemento que esté al lado estarán en otra posición por lo cual no tienes que pensar la imagen como en posición absoluta sino que tú irás poniendo distintos elementos dentro de esta tabla invisible si? pero vamos que si es una imagen que tiene que tener texto a los costados parece que eso no necesita grid sino un float left o right depende del caso donde quieras alinearlo cualquiera de las dos atributos o propiedades puedes utilizarla vale, Iván Barreda nos pregunta que esta vez me parece muy interesante que si hay algún simpadre que utilice grid algún tema en WordPress es una buena pregunta pero lamentablemente no tengo respuesta porque todo mi trabajo lo hago en forma personalizada no comienzo con temas de repositorio con lo que uno sabría decirte pero si quieres me tomo el trabajo de buscarte alguno tengo yo una lista de algunos test que suelo utilizar de repositorio para otros proyectos y me voy a mirar si alguno de ellos utiliza grid la verdad que no lo he mirado como no trabajo mucho con ellos no sabría decirlo, lo siento bueno pues nada Iván estuvo a hacer un pot va a tener que esperar un poco Iván aquí un poquito pero bueno te seguro que se lo dices enseguida y vamos con la última pregunta que tengo aquí de Tamara Zambrana que dice si recomiendas usar grid desde ya por supuesto desde ya desde ya que que comiencen de a poco que van a tener la presentación que utilicenla fíjese en cuáles son las propiedades que utilizo no hay muchos allá de eso que utilizo con todo eso con esas propiedades que expliqué pueden hacer lo que quieran pueden implementar cualquier diseño que cualquier diseñador os pase así que si utiliza ya grid y flex los dos en conjunto bueno Mau pues nada muchísimas gracias por tu charla ha sido genial ahora en el canal de zoom tenéis a Mauricio por si queréis seguir charlando con el tenéis los enlaces recordar en el email que recibisteis el martes con todos los enlaces de los zoom y también el zoom de los sponsors por el que queréis pasar por allí y bueno voy a dar paso a la siguiente charla Mau un placer ganas de verte un abrazo lo mismo