Veamos una serie de patrones y de diseños que van a ser muy comunes a lo largo de tu vida como programador
o desarrollador web ya sea front end o full stack.
Veamos por ejemplo que son los patrones de diseño vas a encontrar en los materiales del curso de este
video esta carpeta.
Patrones de Diseño va a ser un archivo zip.
Una vez que lo descomprime tienes esta carpeta y la vamos a abrir de nueva cuenta en estudio cour puedes
ver que son 16 carpetas estaremos trabajando con cada una de ellas una por video vamos a abrir la que
será uno y puedes ver que tenemos dos columnas iguales y ese es el siguiente dice dos columnas iguales
pero es con Flex Box esa es la idea es mas que nada ver los diferentes patrones ya sea tener dos columnas
iguales sino un diseño y cómo serían con GRID y cómo serían con lo que viene siendo Flex Box.
Vamos a abrir este índex botón derecho y lo vamos a abrir con la Server algo muy importante es que los
ejemplos con Grid.
La mejor forma de visualizarlos es con Firefox developer tools aquí se una búsqueda vendría siendo éste
Barefoot developer túbulos que el Pertuz Developer Edition es un navegador específicamente diseñado
para programadores o desarrolladores.
Entonces puedes presionar aquí para descargarlo y ya lo tengo instalado lo que voy a hacer es abrir
éste en la parte de acá tiene un visualizador que es bastante bueno para lo que viene siendo CSS Grid
vamos a comenzar un poco con este proyecto.
La idea que tengo es que tanto ésta que es el título entrada de blog como ésta otra que tienen imágenes
diferentes cada uno toma la mitad uno a la izquierda y otro a la derecha de esta página para ello puedes
colocar en el contenedor este contenedor básicamente lo que hace es centrar el contenido pero también
puedes agregar una segunda clase que diga por ejemplo dos columnas algo así.
Abrimos el CSS y de nueva cuenta voy a colocar ese código en la parte inferior vamos a colocar esa clase
dos columnas y muy importante primero Oblitas que tenga el display de grit display Grit y eso ya hace
que los hijos se lo pueda aplicarse se Grit tanto este articulo como este otro la ventaja que tiene
grit es que funciona como si fueran tablas HTML pero ya con un poco mas de avance por así llamarlo un
poco mejor y la forma en la que vas a definir que haya dos columnas es decir una a la izquierda y otro
a la derecha porque nuestro diseño son dos columnas iguales es utilizando la sintaxis de grit en Plait
Columns gritã en plan columnista permite definir columnas y aquí le puedes colocar por ejemplo que una
columna mida 600 pixeles y la otra también mida 600 pixeles eso es lo que va a hacer es una división
es decir va a cortar el diseño porque nuestro contenedor si recuerdas máximo 1200 pixeles entonces puedes
colocar esto iba a colocar a la izquierda la derecha.
Esta sintaxis es buena pero no es como la más recomendable sería mejor si tuviéramos 50 por 150 por
ciento y el resultado es el mismo lo que haces divide en dos 50 a la izquierda 50 a la derecha y se
colocan de esta forma Gretta en otra forma de hacerlo porque puedes colocar un FR.
FR ahora tal vez casi esté una fe requetés no veo una F Ferres una fracción piensa como en la primaria
que nos daban fracciones.
Entonces tienes una fracción tienes otra fracción y la forma en que hace la división Grid es contar
cuantas fracciones hay y después se asigna el valor de esa fracción es como si fuera un pastel lo tienes
el pastel completo una fracción otra fracción y bueno básicamente les toca mitad y mitad a cada quien
es lo mismo en esta parte de aquí el resultado es el mismo y existe otra sintaxis que se conoce como
repeat.
Le dices cuántas veces 2 en este caso de una fracción.
Personalmente a mí me gusta más esta sintaxis es la que utilizo casi siempre y puedes ver que tenemos
nuestras dos columnas de diferentes formas las vimos como hacerlas ahora veámoslo en Firefox developer
tools voy a dar botón derecho inspeccionará el elemento y puedes ver que por ejemplo aquí dice dos columnas
aquí selecciono el elemento y tengo este GRiD puedes dar click aquí y eso es lo que va a hacer es habilitar
el grid puedes ver que tenemos ya estas líneas si no ves estas líneas en esta parte de aquí donde Grid
habilita todos los cheques que hay aquí.
Qué otra forma no se va a ver nada es como si no hubiera nada habilitarlos y passer que tenemos nuestro
Grid.
La ventaja que tiene grieta es que por ejemplo si un día decides cambiar de dos a cuatro nada más cambias
aquí a cuatro y te va a generar automáticamente todas las columnas.
Eso me gusta mucho de Grid la verdad sobre todo de esta sintaxis dejarlo como dos abrimos de nueva cuenta
de haberlo predicho y perder que tenemos dos columnas.
Ahora si quieres tener un poco de separación aquí tal vez pienses en un margen podría ser una buena
opción.
Sin embargo Grid lo hace un poco diferente.
Anteriormente puedes utilizar siempre Grid GAP pero esta opción ya está siendo eliminada y la están
quitando.
También puedes utilizar Grid Column GAP pero esto también ya la están quitando.
La están quitando solamente por este GRiD puedes quitarlo y solamente con un gap va a ser suficiente.
Cuantos que te gustaría tener de separación aquí digamos dos Reem 20 pixeles.
Guardamos cambios abrimos el proyecto y puedes ver que tenemos ya esa separación se separa cada una
de las columnas y nuestro diseño tiene dos columnas.
Ahora si lo haces pequeño se va a ver de esta forma en un dispositivo móvil tal vez eso no es lo que
quieres.
Por lo tanto muchas veces este código.
Lo ideal es que vaya dentro de un media query utilizando el enfoque móvil fears.
Digamos que a los 768 pixeles que es el tamaño estándar de una tablet pues de acuerdo a una tablet entonces
que se aplique este código en un dispositivo móvil saber de esta forma pero conforme crezca vamos a
tener nuestras dos columnas ya en un dispositivo más grande entonces así es como funciona algo muy importante
y que no mencioné.
Puedes ver que tengo dos columnas y coloque el display Grid.
Este display Grid va a afectar únicamente al primer nivel de hijos muy importante.
Dos columnas solamente va a afectar al primer nivel que vendrían siendo cada uno de estos artículos.
No va a haber afectado los contenidos que haya que adentro aunque esos contenidos sí se van a ver afectados
por el artículo pero este display Grit al igual que Flex Book solamente afecta al primer nivel de hijos
lo iremos viendo más a detalle con los demás enfoques.
Ahí va a quedar más claro cómo se ven afectados el primer nivel de hijos de cada elemento en el siguiente
vídeo.
Veamos el mismo ejemplo pero ahora con Flex Books en algunos casos Grid va a ser una muy buena opción
en otros Flex.
De esta forma vas a poder comparar la cantidad de código que requiere cada uno y también como desarrollador
es importante que conozcas ambas porque los dos son el estándar de hoy en día.