En este capítulo vamos a trabajar con C s c Grid.
Vamos a ver primero qué es ese secreto también se conoce solamente como Grid o también lo puedes buscar
como si es escrito o sea ese Grid Layo primero vamos a ver qué es ese Grid.
Entre sus características es que te va a permitir definir un tamaño y una ubicación de tus elementos
en el sitio web tú le vas a decir dónde quieres que se muestren y es muy importante mencionar que si
ese es GRID o Layout es el nuevo estándar no tiene aún un soporte al 100 por ciento.
Está muy cercano enseguida lo veremos pero es el nuevo estándar incluso es más nuevo que Flex box al
igual que las tablas las que vimos anteriormente como theyll en HTML CSS Grit te va a permitir alinear
y mostrar el contenido dentro de estas tablas es muy similar aunque hay que decirlo es ese Grid es mucho
más avanzado que las tablas.
Es más flexible y además te va a permitir crear diseños mucho más avanzados que los que puedes lograr
con una tabla.
Las tablas ya son algo muy viejo en los libros de HTML pero en la base es muy similar.
Ahora muy importante a diferencia de Flex Books Flex Books es unidimensional.
Eso quiere decir que tu diseño va como Roh o como columnas si recuerdas le poníamos el flex Direction
como Rob o como Colm.
La diferencia principal es que Grit maneja ambas dimensiones cuando agregas un display como Grid.
Es una nueva forma de realizar Latios y menciona anteriormente que es similar a las tablas pero en realidad
estrictamente hablando no hay comparación con ninguna herramienta o un framework que ofrezca semejante
nivel de control sobre los Layout que vas a construir.
Entonces la diferencia principal es que mientras en Flex Box todo corre hacia la derecha por así decirlo
o en columnas o hacia abajo se puede decir que Flags Books es de una dimensión Rou o como tú lo defines
como el flex direction.
En el caso contrario tenemos así ese grito 12 es ese Grid que este maneja ambas dimensiones.
Puedes ubicar elementos ya sea como columna o como ROH.
Una vez que vinitos display Grid puedes colocar lo que se conoce como un templates para las columnas
y otro para los robots.
Lo veremos a detalle totalmente en el proyecto que vamos a construir continuando con Flex exhibit tal
vez si que es bueno gritás más nuevo flexivos entonces ya no se utiliza o como está esto es muy importante
mencionar que Grid y Flex Box funcionan excelente si los utilizas de forma conjunta en el mismo proyecto
de hecho notarás que algunas cosas pueden ser hechas más fáciles con Flex Books y otras más fáciles
congrí entonces se complementan tanto Flex box como Grid y son una excelente opción para crear Layout
algo que también es importante sobre Flex Sigrid.
Es que en Flex Books el contenido crece automáticamente recuerdas utilizábamos la Xbox 1 y eso hacía
que creciera o podíamos darle una base en el caso de si ese es Grid 2 ese Grid el contenido se debe
de agrupar en una área definida que se conoce como templates.
Veremos cómo definir un área para las columnas y otro para los rojos todo eso lo veremos más a detalle.
Puede sonar confuso ahorita la idea de este capítulo es que veamos toda esa parte no es tan complicado
suena más complicado porque es algo nuevo pero no es tan difícil entonces está la introducción a Grid.
Veamos ahora un poco sobre el soporte antes de pasarnos al código y la mejor página para revisar el
soporte siempre va a ser que en ayudes puntocom por ejemplo aquí le pones la propiedad que quieres buscar
en nuestro caso si recuerdas cuando utilizamos Flex exponíamos display 2.0 Flex entonces buscamos Flex
y puede ser que el soporte es bastante bueno 95 por ciento es el soporte hoy en día ya de Flex Box es
una tecnología ya muy estable y que todos lo soportan correctamente a excepción agriamente de Internet
Explorer pero puedes ver que Edge sí lo soporta.
Ahora vamos a ver Grid si ponemos Grit puedes ver que el soporte también es muy bueno incluso por ejemplo
Internet Explorer lo soporta de la misma forma que lo soporta Flex Box Edge también soporta bien Firefox
Crom todos los navegadores a excepción de Opera Mini que no se quien lo utilice.
La verdad puedes ver que el soporte es del 88 1.17 por ciento así que el soporte es muy bueno no igual
que Flex box pero es un número bastante alto y considerable.
Vamos a comenzar con el código y tus materiales de este capítulo son vídeos largos porque no tenemos
ya mucho espacio en el curso.
La idea también es meter más contenido.
Vas a encontrar este proyecto se va a hacer un zip a la hora de descomprimir lo va a tener dos carpetas
principales una con los diseños estos son los tres diseños que estaremos construyendo y una más con
los materiales los materiales los encontrarás front end Stork CSS grit.
Esto lo puedes copiar y pegar por ejemplo en tu escritorio.
Este contiene tres archivos HTML están vacíos.
Solamente tienen enlaces hacia una hoja de estilos en las fuentes de Google Fonts.
Las imágenes cuentan con todas las imágenes que requerimos.
Y finalmente tenemos un archivo CSS ya agregado pero no tienen nada en realidad de nueva cuenta.
Igual que como hemos hecho en estas nuevas actualizaciones está retrasando estudio COG ya hoy en día
me gusta mucho utilizarlo entonces estaremos utilizando esta al menos yo para grabar los vídeos.
Entonces voy a abrir furon en estor dentro de Visual Studio Kot muy importantes que voy a utilizar una
extensión.
Si no sabes cómo instalar extensiones en Visual Studio ACOG tengo un vídeo en mi canal de YouTube en
el que tengo cómo instalar extensiones y cómo lograr que se vea esto.
De esta forma en esta parte en el último icono busca una extensión que sea más Live Server nos va a
ahorrar mucho la parte del desarrollo aquí que tiene como el icono del WiFi solamente que solamente
en la parte donde además lo instalas y reinicia su estudio Cody con eso es suficiente vamos a abrir
el índex puedes ver que es muy sencillo nada más tenemos lo que viene siendo la estructura del Bodhi
algunos enlaces hacia estas hojas de estilos de CSS que es la que está aquí y normal y también una fuente
de Google Fonts de click aquí abajo para que abra lo que viene siendo la IP server por eso es que queda
esta forma y vamos a comenzar a escribir un poco de código.
Voy a cerrar esto de aquí puede colapsar esto para que sea más fácil de ver el video y vamos a comenzar
creando Gelder.
Voy a abrir los diseños porque tenemos que hacer que se vean como estos diseños que tengo aquí no habría
este índex estaremos trabajando con el índex primero entonces una vez que abrimos el índex puede ser
un poco más grande puede ser que tenemos el logotipo en la parte superior no tenemos esta barra el logotipo
va a ser un Jaider la etiqueta Gebser y darle una clase o clase para poderlo seleccionar.
Y después puede ser que tenemos el logotipo entonces un MG Ese reces vamos a apuntar a la carpeta MGI
y tenemos un logo punto P En qué poner un texto alternativo que las bases y el logotipo y ese va a ser
nuestro.
Si guardas cambios al abrir en Crom se va a recargar.
Eso me gusta de la HP por eso lo estamos instalando ya tenemos lo que es el logotipo.
Después si vemos la siguiente parte tenemos esta barra que nada más dice Tienda y nosotros así que vamos
a ver cómo crearla.
Primero vamos a crear un dip con la clase de barra y después con un NAP con la clase de NAV y voy a
crear dos enlaces algo que me gusta de estudio como es que tiene Emet por ejemplo puedes poner por dos
y te va a crear dos enlaces que le va a dar enter.
Voy a ponerle aquí nada más.
Bueno de hecho si bien enlazar índex punta HTML y este otro enlazan nosotros punta HTML y a quien el
texto va a decir uno por ejemplo tienda y el otro va a decir nosotros que es lo que tenemos aquí tienda
y nosotros son estos dos enlaces.
Si recargamos los que tenemos tienda y tenemos nosotros bueno vamos a abrir lo que viene siendo ese
es el Estado el que está vacío de nueva cuenta voy utilizar lo que se conoce como custom properties
o también se les conoce como variables de CSS.
Aquí va a poner una variable para la fuente principal y esta fuente es la misma que tengo aquí solamente
que tiene un nombre medio extraño este nombre que tenemos aquí en Google Fonts.
Voy a poner esa fuente y luego cursiva.
En caso de que no enlace hacia las fuentes de Google Fonts que lo muestre como cursiva.
Después voy a agregar algunas variables para los colores o un color primario que yo ya lo elegí los
colores son estos que están aquí el color amarillo el morado y este es un poco más oscuro el mismo color
morado aquí nueve dos siete cero y ese es el color morado y voy a poner un primario oscuro que va a
ser este color de aquí que está un poco más oscuro y puede ser que incluso las camisetas tienen ese
color también se utiliza a lo largo del diseño entonces voy a poner una variante de este color signo
de gato numeral ocho nueve uno uno nueve se va a ser un color un poco más oscuro y finalmente tenemos
un secundario que es el color amarillo entonces va a ser FFC 0 0 se va a crear tres variables con los
colores después voy a colocar aquí un código HTML y también voy a poner lo que viene siendo el código
que vimos anteriormente de Pol oiréis el visor y el Aster.
Estos también pueden ir con doble no hay ninguna diferencia en realidad y voy a utilizar Reem si recuerda
Framis cuando le pones Foncea y 62.5 de esa forma puedes utilizar por ejemplo un iPhone 6 de 10 pixeles
y eso va a ser igual a un Reem.
Por eso utilizo este reset por así decirlo para utilizar REMS los REMS tienen la capacidad de que se
ven mejor cuando alguien entra en un dispositivo móvil.
La fuente se ve un poco mejor se adapta mejor a la pantalla para habilitar el box sin como vimos anteriormente
de Pol Heydrich.
Vamos a poner el Border Box y aquí Bakshi sin iba a ser injerir con eso es suficiente.
Después va a colocar aquí un body que este lo único que voy a hacer es ponerle un color de fondo background
color y vamos a ponerle Bahr para utilizar nuestras variables y voy a utilizar el color primario defines
tus variables de esta forma siempre con el selector de ruta ahí los agregas le agregas estos nombres
con doble Hyon y luego el nombre y el valor pero las utilizas con Bahar entre paréntesis el nombre de
la variable como lo tengas aquí finalmente un link de dos pongo dos porque la verdad da fuentes que
vamos a utilizar tiene la característica de que se ve muy pequeña entonces vas a dos lo pequeño que
se ve aquí queda bastante pequeño algo que puedes hacer es aquí en el body y también darle un Foncillas
bonsais digamos dos Reem que eso sería una pase de 20 pixeles tampoco mejor pero obviamente estaremos
escribiendo más código.
Poco a poco el siguiente paso es darle estilos a la barra.
Puedes ver que tenemos esta barra poner esa barra aquí le doy punto barra y punto barra y voy a seleccionar
la navegación que tenemos a seleccionar primero la barra puedes ver que la barra tiene la característica
de que se expande hacia las orillas toma todo el espacio por eso está por fuera del NAP y después tenemos
la navegación que nos va a servir para aplicar un poco de ese grit.
Los primeros lo primero vemos lo del Gelder porque quiero mostrar algo en la barra aquí lo voy a poner
un background color que si recuerdas va a ser el primario pero que es oscuro porque esa barra es un
poco más oscura que el resto entonces podés ver que toma todo el espacio disponible por eso es que está
por fuera y después voy a colocar un Padín arriba quiero un ring y cero a los lados si guardas cambios
para ver que tenemos un poco de separación en que se ve mucho mejor ahora puedes ver que el contenido
debe de estar centrado si vemos el diseño final debe de estar centrado de esta forma hay muchas formas
de hacerlo muchísimas formas de hacerlo en realidad pero lo vamos a hacer a quien no lo va a poner primero
un display grit.
Es muy importante que para utilizarse ese Segrià tenés que ponerle display grit.
Si recuerdas en Facebook será display Plex display Greet y después vamos a utilizar justifique Content
y vamos a ponerle sesentera y eso va a centrar el contenido que queda centrado de esta forma ahora en
el diseño que tenemos o que estamos creando.
Puedes ver que está uno a la izquierda y otro a la derecha para ello es que defines lo que se conoce
como gritã temple y Colombes así se llama griten íconos o columnas de grit puedes ver qué tenemos aquí.
Tienda y tenemos nosotros entonces son columnas son las que van de izquierda a derecha.
Puedes poner aquí por ejemplo 200 píxeles y 200 píxeles y guardar cambios y puedes ver que se van a
acomodar de esta forma se ve extraño.
Déjame mostrarte cómo funciona esta parte cuando trabajas con s Secret el mejor navegador que puedes
instalar es Firefox Velho Prediction es este que está aquí de color azul.
Si lo de inspeccionar elemento y por ejemplo inspeccionó si recuerdas que pusimos nada cuánto valor
el código es en el barra NAP ahí le puse el display Grit abro barra y lo Conap y puede ser que aquí
se grita si das clic en esa parte te habilita la vista de GRID y puedes ver que tenemos esta vista y
tenemos estas dos partes.
Nosotros le dijimos creame dos columnas de 200 píxeles cada una a 200 y 200 píxeles y lo que hace Grieco
lo que hace esta parte es que la habilitã en este selector.
El display detecta que hay dos columnas y detecta que hay dos elementos y los acomoda automáticamente
y los deja de esta forma.
Ahora este código está bien de hecho así es como se hace pero puedes ver que por ejemplo nosotros le
dimos un ancho de 200 píxeles y 200 píxeles.
Este código se puede mejorar si aquí le pones por ejemplo repite 2 2 veces digamos 200 píxeles y eso
es exactamente lo mismo si Guardar cambios y recargas.
Puedes ver qué es exactamente lo mismo nos creados si lo pones aquí 3 te va a crear 3 elementos puedes
ver que aparecen tres en esta parte donde dice Layout es donde vas a poder ver cómo defines la estructura
de tu de tu Grid y eso es algo que por eso decía que es muy similar las talas que se van a colocar dentro
de estos elementos este caso y más que los dos pueden ser confusos es el primer Grid que hacemos pero
estaremos creando más a lo largo del curso.
Ahora si quieres por ejemplo tener un poco de separación aquí entre cada uno de ellos tal vez pienses
en hacer algo así como copiar éste y ponerle que una y ponerle un margen de digamos 2 Reem si haces
eso sí te crea lo que viene siendo la separación si te queda al margen aquí puedes ver el área naranjada
en el video pero Grid lo hace aún más fácil porque nada más pones aquí una máquina esta parte Grit con
un gap que le pones por ejemplo un Reem y eso te va a crear una separación aquí.
Obviamente los márgenes y los Padín se siguen utilizando incluso en flexivos Ingrid pero cuando quieres
separar elementos de tu layout de esta forma digamos en el diseño que vamos a construir puedes hacer
que cada camiseta está separada.
No utilizamos margenes para eso ya se utiliza lo que viene siendo los GApps pues ver que se va viendo
bastante bien.
Además para finalizar esta parte de la navegación voy a colocar los selectores para la navegación a
los enlaces vamos a poner aquí from family.
Voy a pensar la variable de fuente principal y también iPhone 6 Voy a ser una fuente grande 3 RAM.
Digamos que guardás cambios que se ven grandes.
También lo puedes centrar digamos texanas encender para que se centren dentro de su contenedor.
Es decir esto ya está centrado pero dentro de su contenedor de lo que viene siendo Grit lo que hemos
creado aquí.
También que se centra en que se vean más centrados y finalmente el color del texto va a ser blanco puro
Acebes un TACs de Coronation para el removerle en la línea que tiene en la parte inferior.
Nunca me ha gustado la verdad y creo que se ve bien.
Finalmente para dar cuando Discover aquí por ejemplo que quieras ver el enlace me gustaría otro color
veamos este selector y ponemos aquí 2 puntos Jabber iba a tener un color va a cambiar de blanco hacia
un color que va a ser secundario que vendría siendo el color amarillo que hemos definido en las custom
properties aquí arriba.
Entonces cuando abro mi navegador y doy Jabber puede ser que cambia entonces puedes ver cómo funciona
aquí por ejemplo puedes ser que repite 2 200 pixeles.
También le puedes poner un auto y auto va a ser que tome solamente el tamaño que requiera por así decirlo
no por así decirlo obviamente el tamaño que requieran siéntete libre de utilizar cualquier forma darles
un ancho fijo o también ponerle auto para que tome cierta parte incluso más adelante veremos otras formas
de definir el tamaño de los elementos que lo hacen mucho más fácil incluso que si estuvieras utilizando
un framework como Bootstrap.
Ya para finalizar puedes ver que les dimos estilos a la barra pero nos olvidamos totalmente del Jaider
hay varias formas también de centrarlo que tenemos GDR y luego la imagen primero voy a hacer un poco
de espacio arriba puedes ver que para centrar la navegación utilicé display Grit y Estefi content Center
Steffan content Center algo que vimos en Flex box pero también se utiliza y hace lo mismo en Grid.
Es lo que aprendiste en el capítulo de Flex Book sigue siendo vigente en greet la parte de contén ya
hay items todo eso sigue siendo igual.
Aquí iba a poner un punto jede y para alinear esa imagen voy a ponerla aquí.
Display grid de nueva cuenta yo estoy contén ponemos Center si guardamos cambios y abrimos el proyecto
en esta parte puedes ver que eso centrã lo que viene siendo la imagen es el mismo resultado que si le
pusieras aquí display Flex te va a dar lo mismo pero no utiliza Greed y otro utiliza Flex entonces puedes
utilizar cualquiera de las dos partes de greet por eso lo pongo como Grid.
Finalmente le voy a poner un PADI porque puedes ver el diseño tiene una separación aquí arriba y aquí
abajo.
Si recuerdas anteriormente dije que para crear la separación en los elementos utilizas Grid Yap eso
es para crear la separación entre los elementos pero tenemos que agregar espacio antes y después y en
eso se sigue utilizando mucho PADI todavía espadín arriba y abajo arriba y abajo de cero y guardamos
cambios si tenemos la separación y se ve correctamente en el siguiente vídeo vamos a comenzar con esta
parte de nuestros productos puedes ver cómo está el listado de los productos así que veremos cómo lograr
algo así.
Conce ese grito.