Transcripciones
1. Introducción a la clase: Hola, me llamo Luke Faddish, he sido desarrollador profesional de software desde hace casi 20 años. Pero hoy, estoy súper emocionado de estar empezando nuestra clase. En esta clase, vamos a aprender cómo podemos usar grilla
CSS para construir un portafolio web en línea. Si no estás familiarizado con ello, codicia
CSS es el nuevo estándar CSS para diseñar páginas web complejas. Anteriormente, para hacer esto, teníamos que usar marcos grandes como bootstrap y foundation, o un montón de hacks CSS que se mostraban de manera diferente en cada navegador y este es el problema que la grilla CSS resuelve para nosotros. Durante esta clase, implementará este portafolio web en línea que se ve y funciona muy bien en dispositivos de escritorio y móviles. También he puesto un montón de recursos en el área del proyecto para que sea súper fácil iniciar tu proyecto. Voy a estar contigo a cada paso del camino durante esta clase, así que si te encuentras con algún problema o necesitas ayuda, no dudes en avisarme en el área de discusión comunitaria de esta clase. De lo contrario, espero ver lo que construyes con la cuadrícula CSS.
2. A QUIÉN ESTÁ DIRIGIDA LA CLASE: Para quién es esta clase? Esta clase es para cualquier persona que quiera aprender a crear un diseño web usando filas y columnas. Esto es lo que nos da CSS. Se trata de una clase de nivel intermedio. Estoy asumiendo que ya conoces un poco de HTML, CSS, y que puedes usar un editor de texto. Si ese no es el caso, no te
preocupes porque estamos aquí en cuota de habilidad. Podrás encontrar clases sobre todas estas cosas con una búsqueda muy rápida. Vete y haz eso si es necesario y luego vuelve a esta clase. De lo contrario, siéntate fuerte para la siguiente lección, donde repasaremos a detalle lo que vamos a aprender durante esta clase.
3. Lo que cubriremos en esta clase: Bienvenido de nuevo a nuestra lección de cuadrícula CSS. Esto va a ser un resumen muy rápido de lo que vas a aprender en esta clase. Lo primero que tenemos que hacer es hablar de qué cuadrícula CSS y para aprender sobre eso, necesitamos saber qué es un sistema de diseño en CSS. Hablaremos de qué es eso. Hablaremos de otros sistemas de diseño CSS. Ya veremos cómo la grilla CSS es diferente y por último, dónde podemos usarla. Entonces entraremos en cómo podemos definir las columnas de cuadrícula CSS, tendremos que usar la cuadrícula de visualización. Nos enteraremos de cómo hacer columnas usando columnas de plantilla de cuadrícula que es una regla de estilo CSS. Entonces averiguaremos cuál es la unidad fr cuando estemos midiendo columnas. Después trabajaremos en un ejemplo muy sencillo que demuestre el uso de las reglas de estilo CSS. Después de eso, entraremos en crear un diseño más completo y completo. Aquí es donde comenzaremos en nuestro proyecto de clase, que es el portafolio. Aprenderemos cómo podemos pintar una cuadrícula usando áreas de plantilla de cuadrícula. Ya veremos sobre área de rejilla, niños, y trabajaremos en nuestro proyecto principal. Como dije, el portafolio también pasaremos un poco de tiempo
hablando de cómo podemos posicionar contenido dentro de las columnas. Para eso, usaremos la regla de la autojustificación CSS y también alinear-self. Entonces, finalmente, trabajaremos en hacer algo de espacio en la cuadrícula, usando brecha de rejilla. lo último de lo que realmente necesitamos hablar es cómo podemos hacer que nuestro diseño de cuadrícula sea receptivo. ¿ Cómo hacemos que se vea bien en los navegadores de escritorio y en los navegadores móviles y telefónicos también. Haremos que nuestro diseño sea sensible y usaremos @ consultas de
medios para definir diferentes diseños. Siéntate bien para el próximo video, donde hablaremos de lo que realmente es la grilla CSS.
4. Entonces, ¿qué es la cuadrícula de CSs?: Hola a todos, bienvenidos de nuevo a nuestra introducción de la grilla CSS. En este video, vamos a hablar de qué es realmente la grilla. Antes de hablar de eso, realmente
necesitamos hablar de cuáles son el sistema de maquetación porque esto dice grid es un nuevo sistema de maquetación. El sistema de diseño es un conjunto de reglas que los navegadores web utilizan para organizar elementos en una página de forma predecible. Suena como un poema. El punto aquí es que los navegadores usan este conjunto estándar de reglas para organizar nuestros elementos, que es decir como H1s, divs,
y spans, y cosas por el estilo de una manera predecible. Las páginas web se ven más o menos igual en diferentes navegadores y establecer el diseño CSS predeterminado es tratar todo como una caja. Las cosas se apilan uno encima del otro o al lado del otro. Si tenemos una página web, este gradiente es como la página web aquí. Podríamos tener como un gran div ancho que atraviesa como encabezado. Nuestra sección principal estaría apilada debajo de eso, realmente no
estamos apilando uno encima del otro, el apilamiento debajo, pero te das la idea. Entonces dentro tenemos cosas que están al lado o encima uno del otro. Esto fue genial cuando los sitios web se veían así. Pero desde entonces, hemos estado pirateando
el sistema de diseño predeterminado para que podamos hacer que las páginas web se vean más así. Si aunque no queremos que nuestras páginas web parezcan un periódico, aún
queremos que las cosas se arreglen en filas y columnas. Se puede ver aquí que he trazado algunas líneas para mostrar de qué estamos hablando aquí. Lo que la cuadrícula CSS puede hacer por nosotros es definir filas. Ahora una fila sería esta sección donde tenemos noticias, el gran titular ahí y luego debajo de que tenemos otra fila la cual contiene todo el contenido de noticias. Entonces podemos definir columnas. Se puede ver que el contenido de noticias como esa segunda fila de ahí, con cosas dentro de ella. Se pueden definir columnas en las que poner las cosas. Podemos arreglar las cosas dentro de esas columnas. Ahora, aquí es donde como el sistema de diseño de caja CSS estándar vuelve a entrar en juego. Ahí se arreglarán las cosas de la manera habitual. Es sólo que hemos seccionado algunas partes de la página para que sean tratadas un poco diferente. Ese es el sistema de diseño de cuadrícula CSS. No obstante, sí nos da la opción de arreglar las cosas dentro de esas columnas un poco diferente también. Podemos utilizarlas diferentes reglas de estilo para centrarlas horizontal o verticalmente, lo que siempre ha sido un gran reto CSS. También podríamos crear canaletas también. Ahora, canaletas son estos espacios entre filas y columnas que dan a nuestra página un poco de espacio para respirar el espacio cosas un poco no lo hace parecer demasiado lleno. ¿ Hay alguna trampa para usar la grilla CSS ahora mismo ya que hace todas estas cosas impresionantes para nosotros? Esta es la captura aquí mismo al momento de grabar este video 75.34 por ciento de Internet está usando un navegador que soporta grilla CSS. Ahora bien, eso no es una gran captura porque ese número está aumentando todo el tiempo y se incrementa con bastante rapidez. No obstante, debes saber que si estás usando la cuadrícula CSS en un sitio web o aproximadamente tres cuartas partes de internet, vas a poder usarlo de la forma en que pretendías que fuera utilizado. Pero como dije, ese número está aumentando todo el tiempo. Creo que la grilla CSS es algo que todos necesitamos aprender para el futuro.
5. Cómo definir columnas de la cuadrícula de CSS: Hola y bienvenidos de nuevo a nuestra introducción a CSS grid, donde vamos a construir nuestro propio portafolio en línea. En esta lección, no vamos a trabajar en nuestro portafolio. Vamos a empezar a definir algunos CSS en columnas de cuadrícula, y vamos a usar otra pequeña página de ejemplo para hacerlo. ¿ Qué vamos a cubrir en este video? Ya veremos cómo podemos definir columnas de cuadrícula CSS. Descubriremos cuál es la unidad fr. Arreglaremos contenido dentro de una columna, y lo haremos construyendo aquí esta divertida página de ejemplo. Se puede ver dónde se inclinan y el contenido a través de la página. Lo primero que tenemos que hacer es echar un vistazo al HTML que vamos a usar para hacer eso. Ahora no vamos a editar este HTML. Sólo vamos a estar trabajando con nuestro CSS. No obstante, es una gran idea para nosotros estar familiarizados con la estructura de la página con la que estamos trabajando cuando editamos nuestro CSS. Todo el código con el que estamos trabajando hoy está disponible en la sección de recursos del proyecto y en la columna de cuadrícula CSS, example.zip. Puedes encontrar el HTML, el CSS y las imágenes que estamos usando para esta pequeña página para que puedas trabajar junto con ella también. Pero primero, aquí está nuestro HTML. Aquí estamos en nuestro código mirando el HTML y
se puede ver que tenemos una página web HTML bastante típica. Estamos vinculando a nuestras columnas de cuadrícula CSS, .CSS aquí. Después bajamos a mirar el cuerpo de la página web, que es la parte que nos interesa. Se puede ver tenemos un activo que contiene con contenedor de
clase y dentro de eso tenemos una serie de otros. uno de ellos tiene un H1 en él, y luego cuatro tienen imágenes dentro de ellos: carretera 1, 2, 3, y 4. jpg. Entonces por fin tenemos algunos créditos. Aquí es de donde sacamos nuestros melocotones de carretera y eso es todo lo que hay a nuestro HTML. Como dije, no vamos a editar esto, pero necesitamos saber que tenemos un contenedor con clase y dentro de eso <div> tenemos una serie de otros <div> que contienen nuestro contenido. A continuación, tendremos un poco de introducción a nuestro CSS. Aquí está nuestro CSS actual. Como puedes ver, es bastante sencillo. Hemos configurado alguna topografía para el cuerpo y hemos restablecido nuestros márgenes a cero. Damos a nuestra H1 un tamaño de fuente grande y dijimos que todas nuestras imágenes van a ocupar un 100 por ciento del contenedor en el que están dentro. Entonces aquí abajo tenemos estos dos selectores CSS poco solitarios, contenedor y luego está dentro del contenedor y aquí es donde vamos a poner nuestro código de cuadrícula CSS. Volvamos a la presentación y veamos qué
vamos a hacer para implementar nuestra pequeña página web. En primer lugar, echemos un vistazo a cómo se ve nuestra página web ahora mismo sin nuestro código de cuadrícula CSS y aquí está. Como puedes ver, se ve bastante podrido. Tenemos estas enormes imágenes y nuestra cabecera arriba en la parte superior y luego nuestros créditos abajo en la parte inferior. Esto no se parece en nada al ejemplo que vimos en la presentación. Pongamos a arreglar eso ahora mismo. Nuestra primera regla de estilo de rejilla será la cuadrícula de visualización. Como saben, podemos establecer nuestra regla de visualización para bloquear o bloquear en
línea o en línea o en línea o flexionar la cuadrícula CSS. Si vamos a superponer las cosas usando el sistema de diseño de cuadrícula CSS, necesitamos establecer el valor de visualización o la regla de visualización en cuadrícula. Eso va en el selector para el elemento padre. Este es el elemento que contiene todo lo demás que se va a organizar dentro de la cuadrícula. Hagámoslo ahora mismo. Aquí estamos de vuelta en nuestro CSS y puedes ver que tenemos nuestra clase de contenedor. Recuerde, este es el elemento que contiene el resto del contenido de la página web. Lo primero que haré es decir display, escriba una cuadrícula. Esto también realmente no va a ayudar
mucho a nuestra página web porque si le doy a eso una recarga y ves todo lo que hemos logrado
hacer es poner nuestros créditos sobre la parte superior de nuestras imágenes y todo lo demás se presenta de manera bastante erótica. Podemos empezar a solucionar esto aplicando nuestro siguiente estilo de cuadrícula CSS, que es la regla de estilo grid-templada-columnas. Esta es la regla que usamos para definir cuántas columnas va a tener nuestra cuadrícula y de qué tamaño son, y esperarla. Esta es una de las formas que podemos utilizar para describir el tamaño de estas columnas. Estamos usando esta curiosa unidad llamada fr. Ahora podríamos usar fácilmente un valor porcentual, un valor M, un valor de píxel, prácticamente cualquier otro tipo de unidad que puedas usar en CSS, puedes poner aquí. No obstante, estoy usando la unidad fr porque es bastante idiomática para la grilla CSS y también porque es algo bastante interesante. Lo que significa fr es fracción y cuando tenemos 1fr 1fr 1fr, se ve un poco raro, no
tenemos nada con que relacionar ese valor. Pero lo que esto realmente significa es porque aquí hemos especificado tres valores, eso le dice grilla CSS que queremos que sea cortada en básicamente tres bits y porque cada valor uno y uno y uno es igual, eso significa que cada uno es va a ser equivalente a un tercio de la página. Ahora, tengo que decirte, luché un poco con toda
esta idea fr al principio porque eso parece realmente intuitivo. Yo quiero tres bits y quiero que sean de igual tamaño pero no estoy acostumbrado a que una computadora haga tanto pensando por mí. Es un poco tan intuitivo para mí que me pareció contra-intuitivo. No sé qué piensas de eso. No obstante, si hubiéramos dicho 2fr 1fr, por lo que todavía había tres mediciones proporcionadas, pero la primera era de dos y las otras eran una; eso significaría que la primera ocuparía el 50 por ciento de la página y los otros dos ocuparían un 25 por ciento cada uno. Ahora vamos a echar un vistazo más a cómo funciona la unidad fr para más adelante en la clase. No obstante, por ahora, solo echemos un vistazo y veamos cómo esto afecta el diseño de nuestra página web. Aquí estamos respaldando en nuestro CSS y grid-templada-columnas necesita ir en el elemento padre,
el elemento que contendrá o sostendrá todo lo demás que queremos se organicen usando columnas de cuadrícula CSS. Podemos decir 1fr 1fr 1fr 1fr, podemos ahorrar eso. Entonces podemos volver a nuestra página web y recargarla y santa molly, repente todo está organizado. Se puede ver que hemos especificado que hay tres columnas, pero si recuerdas en nuestro HTML, tenemos como 1, 2, 3,
4, 5, 6 s aquí y porque hemos especificado más elementos de los que tenemos columnas, qué CSS grid ha hecho por nosotros es envolverlos a través de una nueva fila. Esto es bastante útil, ¿verdad? Tenemos cada una de estas cosas ocupando un tercio de la pantalla y la cuadrícula CSS, porque hemos especificado tres columnas al darle seis cosas para mostrar, sí las envuelve a través de una nueva línea y aún así las dispuso en columnas pares. Algo que debo mencionar, tal vez
te estés preguntando, bueno, ¿qué si tuviera como 20 columnas, tendría que escribir 1fr 20 veces? Eso sería realmente aburrido. Felizmente, tenemos en la cuadrícula CSS esta cosa llamada repeat, que es esta pequeña función de CSS quickie que
dice que queremos x número de cosas de un tamaño particular. En este caso, podemos decir que tendremos tres 1frs y el resultado de eso es que si recargo que es exactamente lo mismo, podemos ver que nuestros caminos titular y nuestros créditos están atascados en la parte superior izquierda de sus celdas y nos gustaría arreglar eso. Muchas gracias. Veamos qué CSS podemos usar en el sistema de diseño de cuadrícula CSS para arreglar eso. Este es realmente un tema de organizar contenido dentro de una columna. Ahora vamos a usar la justicia-auto gobierno, centro y alinear-yo: centro. ¿Qué significan estos? Justify-self está hablando de arreglar las cosas horizontalmente. Podemos tener centro, derecha, izquierda, etcétera. En este caso, lo estamos poniendo al centro, por lo que queremos que las cosas estén en el medio, horizontalmente. Entonces alinear-self se trata de alinear las cosas verticalmente, que podamos pegar las cosas a la parte superior, o a la parte inferior o donde sea de una celda. En este caso, de nuevo, queremos que esté en el centro. Ahora, aplicamos esto a algo que está dentro de nuestro contenedor de rejilla, no al contenedor de rejilla en sí. Ya verás a qué me refiero en un momento. Aquí estamos de nuevo en nuestro CSS, y esta vez queremos aplicar las reglas justify-self y align-self a <div> s que están dentro de nuestro contenedor. Ahí vamos. Si volvemos a nuestra página y recargamos, se
puede ver que nuestros caminos titular y nuestros créditos han estallado en medio de las celdas. Esta es una introducción súper rápida sobre cómo podemos usar reglas de cuadrícula
CSS para dispensar contenido en una página web solo usando columnas. Todavía no hemos empezado a hablar de usar filas. Sólo una recapitulación rápida. Para poder decirle al navegador que estamos usando la cuadrícula CSS, necesitamos establecer la regla de visualización de un elemento contenedor a la cuadrícula. Podemos especificar cuántas columnas queremos en nuestra cuadrícula usando la regla cuadrícula-templada-columnas. Podemos especificar cada columna individualmente, o podemos usar esta función de repetición para especificar cuántas columnas queremos. Para organizar el contenido dentro de nuestro contenedor de cuadrícula CSS, podemos usar la regla justify-self y la regla alinear-self. Justify-self es para organizar las cosas horizontalmente y alinear-self es para organizarlas verticalmente. Ahora cuelgan apretados para la siguiente lección donde comenzamos en nuestro proyecto de cartera y vemos cómo podemos arreglar las cosas tanto con columnas como con filas en cuadrícula CSS.
6. Cómo crear un diseño con filas y columnas: Bienvenido de nuevo a esa introducción a la grilla CSS donde construimos un portafolio en línea usando la grilla CSS. Aquí es donde definimos filas y columnas y es también donde iniciamos nuestro proyecto. Entonces, ¿qué vamos a cubrir en este video? Vamos a aprender a definir un diseño
usando una regla de cuadrícula CSS llamada cuadrícula areas de plantilla. Entonces vamos a usar un nuevo área de cuadrícula de reglas para poner elementos en el diseño. Que es decir colocarlos dentro del diseño que definimos con áreas de plantilla de cuadrícula. Como dije aquí es donde vamos a empezar nuestra pequeña página de portafolio, y solo para ver cómo se ve eso. Aquí lo tenemos justo aquí. Por lo que esta es nuestra página de portafolio de ejemplo. Tenemos imagen de estudio de paisaje o retrato y una imagen comercial. Obviamente, puedes tener lo que quieras dentro de esta área de imagen. Puedes tener un poco de presentación de diapositivas. Acabo de obtener una sola imagen y cada uno de estos enlaces a una página HTML separada con exactamente la misma estructura. La única diferencia es que cada uno muestra una imagen diferente. Hubiera sido mucho más agradable usar una página HTML y tal vez tener algún JavaScript o algo para cambiar entre nuestras imágenes. Pero por el bien de apegarme a aprender sobre la cuadrícula CSS, he mantenido las cosas lo más simples posible aquí. Entonces esto es lo que vamos a empezar durante esta lección. Entonces lo primero que mejor comprobamos es el HTML que define la estructura de la página. Aquí vamos. Aquí está nuestra página HTML de paisaje. Como dije, el estudio de retrato de paisaje y las páginas
comerciales son básicamente iguales. Simplemente se exhiben a imagen diferente y aquí no hay nada demasiado impactante. Tenemos una sección de cabeza HTML bastante estándar. Después nos metemos en el cuerpo, nuestro contenido está contenido dentro de un elemento principal justo aquí arriba. Después entramos a nuestra H1. Entonces tenemos nuestra navegación, que es nuestro portafolio y navegación. Entonces este es un pequeño elemento nav con ID portfolio nav. Estas son identificaciones, veremos por qué son importantes pronto. Después de eso, tenemos nuestro artículo de cartera que es lo que aparece dentro de la página del portafolio, y sólo estamos vinculando a una imagen. Otra vez por brevedad he codificado p1.jpg. Entonces un poco de copyright tuyo verdaderamente, pones tu nombre ahí dentro. Por último en la parte inferior tenemos alguna navegación del sitio que es otra pieza de navegación con un ID site nav, y luego solo algunos enlaces que saldrían a otras partes del sitio. Acabo de usar un href “#” aquí, o una libra. Nuevamente, porque esta es una página web de ejemplo. Una vez más, no vamos a editar ese HTML durante esta clase porque nos estamos centrando en la cuadrícula CSS para CSS. Hablando de lo cual deberíamos echar un vistazo a nuestro CSS también y aquí está. Debo mencionar que una vez más, tengo el HTML, las imágenes, y CSS para esta página de portafolio en un archivo zip llamado portafolio CSS grid, project.zip. Eso tiene todo el HTML que necesitas, las imágenes y
el archivo portfolio.CSS sin el CSS específico de la cuadrícula CSS dentro de él. Eso es para que llenes como haces tu proyecto. La mayor parte del contenido existente aquí tiene que ver con la tipografía. Tenemos una regla para nuestras imágenes, que es estirarlas una vez más
al espacio disponible que tienen cuando se colocan en el diseño. Entonces todo lo demás es más o menos solo establecer texto, estilos y tamaños. Entonces nada de rejilla relacionado ahí. Por lo que ahora es el momento de implementar nuestra primera Regla de Estilo de Cuadrícula CSS. Al igual que la última vez, estableceremos nuestro elemento
contenedor en este caso es el elemento principal en nuestro HTML. Estableceremos eso para que tenga una regla de visualización igual a la cuadrícula. Entonces aquí estamos en nuestro código me acabaría de poner en la cuadrícula de pantalla principal. Antes de hacer otra cosa, deberíamos ir a ver cómo se ve la página web en este momento. Acabamos de estar buscando una versión terminada. Veamos cómo se ve sin nuestro estilo de rejilla. Guarde eso y aquí vamos. Entonces así es como se ve por el momento, no demasiado bonito aunque presumiendo muy bien la foto. Pero no es así como queremos que se vea. Entonces voy a volver a poner eso ahí, darle un ahorro, recargar y mirar no ha cambiado mucho. Pero ahora volveremos a implementar el resto de ese diseño de cuadrícula. Lo siguiente que queremos hacer, igual que la última vez montaremos algunas columnas y esta vez es un poco diferente. Estamos usando nuestra unidad fraccional de la página para una columna y luego tres de ellas y luego 0.1 de ellas. No sé ustedes pero no me parece súper fácil sumar todo eso y pensar en cómo sale en el diseño real. Básicamente lo que hice es que decidí que quiero que sean
mis columnas y luego ajustarlas hasta que se veían bien. Pero pondremos esto por ahora y después cuando pasemos un poco más por este video, podremos ver con más claridad cómo se presenta esto en realidad. Por lo que de vuelta en nuestro código agregue o una vez más dirán plantillas de
cuadrícula columnas 1fr, 3fr, 0.1fr. ¿ Cómo se ve eso la página? Una especie de locura. Así es como lo hace lucir. Pero si pasamos a la siguiente parte de este video, veremos cómo podemos reorganizar todo esto para que sea un diseño de la manera que queremos. Entonces aquí es donde realmente llegamos a describir cómo queremos que se vea la capa y la regla CSS que vamos a usar es las áreas de plantilla de cuadrícula. Ahora esta es una forma de definir cómo se asienta el contenido dentro de filas y columnas. Ahora hay muchas maneras diferentes de hacer esto en la cuadrícula CSS. Personalmente encuentro esto la forma más intuitiva de pensarlo, razón por la
que he hecho esto aquí y generalmente me apego a ello en mi propio trabajo. Pero este es el valor que usamos que entiendo que parece un montón de cosas ahí mismo. Pero si lo
repasamos, podemos ver que aquí hay tres cuerdas. Cada una de esas cadenas representa una fila. Entonces tenemos cabecera, cabecera, esa es la primera fila, y luego cartera nav, artículo de
cartera, esa es la segunda fila, y luego portafolio nav y navegación del sitio, esa es la tercera fila. Entonces veamos cómo se ve esto en realidad. Si tenemos este gran rectángulo gris aquí, finge que esa es nuestra página web. Si volvemos a mirar nuestras columnas, podemos ver que nuestra primera columna ocupa aproximadamente un poco menos de un cuarto del lado izquierdo. Entonces tenemos casi tres cuartas partes retomadas en el medio. Entonces, en el extremo derecho, tenemos el 0.1fr. Esa es una minúscula columna sobre el extremo lejano ahí, y eso es lo que estoy usando como un poco de datos en ese lado lejano. Así se ven nuestras columnas, pero veamos cómo se puede disponer nuestro contenido usando este valor de cuadrículas-templadas-áreas. Una vez más, a título de referencia, aquí está ese valor y lo tiraremos por la esquina inferior allá. Si nos fijamos en la primera fila cuando tenemos algo que se repite dos veces o más de una vez, eso significa que se extiende a través de columnas o filas. Tenemos un encabezado aquí que está apareciendo en la primera fila, y eso significa que va a ocupar dos columnas. Después tenemos portfolio-nav y luego portfolio-item. Podemos ver que hemos dicho, vale, portfolio-nav va a ocupar la primera columna y luego portfolio-item va a sacar la segunda columna. Entonces cuando bajemos a la tercera fila, tenemos de nuevo portfolio-nav y podemos ver que se extiende a través de filas. Entonces, por último, para llenar la última parte de esa fila y columna, tenemos nuestro site-nav. Ahora, como dije, hay diferentes formas en la cuadrícula CSS que podemos definir filas y columnas y cómo los elementos se extienden a través de ellas; cómo llenan el espacio entre esas filas y columnas. Como dije, me parece que esta es la forma más intuitiva y directa de expresarlas y entenderlas. Lo siguiente que debemos hacer es poner este código en nuestro CSS. Si estás jugando en casa con tu archivo CSS de inicio,
por favor, ponlo aquí también. Hacemos en línea sólo por claridad, de verdad. Portfolio-nav seguido de portfolio-item y otra nueva línea. Entonces portfolio-nav seguido de site-nav. Eso está todo bien y bien. Pero, ¿cómo ponemos las cosas ahí dentro? Digamos, queremos que esta parte de la página vaya en la primera fila y abran dos columnas y luego queremos que la siguiente parte quepa por aquí, luego la siguiente parte de ella junto a eso. Así es como lo hacemos. Reemplace elementos en el diseño utilizando esta regla CSS de área de cuadrícula. Estos valores se relacionan directamente con los valores en nuestras áreas de plantilla de cuadrícula. Ya ves tenemos un encabezado aquí. Déjame ir aquí y aquí está cabecera una vez más y note que no tiene comillas alrededor, lo cual es bastante diferente. Es como si hubiéramos creado una nueva palabra reservada de CSS, pero no lo hemos hecho. Acabamos de darle un nombre a una sección de nuestro layout que llegamos a usar más adelante y lo usaremos usando grid-area. Lo que vamos a hacer es definir algunos de estos y todos se relacionan con los valores en rejilla-templadas-áreas. Lo que hacemos es entrar en nuestro código donde estamos aquí. Entonces decimos, queríamos que H1 tuviera un valor de área de cuadrícula de cabecera. Si en realidad puedes ver aquí arriba muy claramente, eso nos sobra diciendo, queremos que nuestro H1 se extienda a través de dos columnas. Entonces, si recuerdas, en nuestro HTML, tenemos estos diferentes elementos: nav con portafolio y ID de portfolio-nav y luego un div con un ID de portfolio-item y un ID de site-nav para éste. Se puede ver que se relacionan de nuevo con los valores utilizados en rejilla-templadas-áreas. No tenemos que hacer eso. Acabo de darles el mismo nombre para mayor claridad, y para ayudarnos a entender cómo se relacionan juntos. Podemos darles cualquier nombre que nos guste, y luego podemos ponerlos juntos en el CSS y
el diseño de cuadrícula CSS los colocará en el lugar apropiado. Diremos elemento portfolio-nav, diremos portfolio-nav área de cuadrícula y luego, por
supuesto, diremos portfolio-item. Entonces, por último, nuestro site-nav toma un área de cuadrícula de site-nav. Ahora podemos guardar eso y echar un vistazo a cómo funciona en nuestra página web. Aquí está nuestra página web, como la vimos por última vez, un sitio bastante, lamentable. Si recargo, puedes ver que se ve mucho mejor. Todavía no está todo el camino ahí, pero podemos ver que nuestra página está mucho más cerca de lo que queremos. Además, podemos ver que se ha presentado de acuerdo a
esa regla CSS de cuadrículas-templadas-áreas . Tenemos nuestro portafolio. Realmente no se puede ver que está atravesando todo el camino por aquí, pero lo es. Después tenemos nuestra navegación de portafolio yendo por el lado y luego nuestro artículo de cartera sobre el lado derecho aquí. Entonces, por fin, tenemos nuestra navegación por el sitio escondido debajo de él. Se puede ver cómo hemos utilizado nuestra regla CSS de cuadrículas-templadas-áreas para describir un diseño y luego cómo hemos utilizado la regla CSS de área de cuadrícula para colocar elementos individuales dentro de esa capa. Ahora siéntate bien para el siguiente video donde
arreglaremos nuestro contenido un poco más bien dentro de nuestro diseño.
7. Cómo posicionar contenido en las columnas de cuadrícula.: Está bien. Bienvenido de nuevo a nuestra Introducción a la grilla CSS. Ahora es el momento de empezar a posicionar algunos de esos elementos en nuestro layout porque podemos ver esto y cosas aquí que no están del todo bien. No queremos nuestro encabezado de cartera todo el camino por aquí. Nosotros lo queremos a la derecha, y la navegación aquí para las diferentes piezas del portafolio se debe hacer en el medio aquí, lugar de empujar arriba donde está ahora. Eso es lo que vamos a arreglar en este video. ¿ A qué vamos a mirar? Algo que ya hemos cubierto, que son las reglas de justify-self y alinear-self. También haremos algo de espacio en nuestro diseño usando la regla de cuadrícula CSS gap grid. El primero que queremos hacer es empujar nuestro h1 todo el camino a la derecha, y lo haremos con el autogobierno justificado establecido al valor, correcto. Aquí estamos en nuestro código y acabaremos de sacar eso ahora mismo justify-self, correcto. Guarda eso. Dale una recarga a esa página, y podemos decir que nuestro encabezado de cartera ha saltado todo el camino a la derecha de ahí. A continuación, queremos arreglar nuestra navegación de portafolio. Para nuestro portafolio nav ID para nuestro elemento, queremos darle el valor alinear-self del centro lo cual es una forma de alinearlo verticalmente en el medio. Aquí está nuestro portafolio nav CSS, y podemos decir alinear-self, center. Si le damos una recarga a nuestra página, ahí vamos, pone nuestra navegación de portafolio en el medio. Podemos decir que nuestra página está empezando a mirar y a trabajar de la manera que queremos. Pero hay una cosa más que queremos hacer, que es crear un hueco entre nuestras filas y columnas, y vamos a darle a eso un valor de 1em. Esto también va en el elemento principal, y este es el elemento padre para nuestra cuadrícula CSS. Ese es el elemento que contiene la cuadrícula. Es donde decimos cuadrícula de visualización, y es donde asignamos las áreas de plantilla de cuadrícula. Lo hacemos aquí porque esto es algo que afecta el comportamiento de todo el diseño de cuadrícula. Diremos brecha de rejilla 1em. Ahora esto afecta a filas y columnas. Ahora sí tenemos grid-row-gap y también tenemos grid-column-gap. Ahora estas reglas se pueden usar para especificar diferentes valores para los huecos entre filas y columnas. Pero debido a que quiero el mismo valor para la brecha entre las filas y las columnas, solo
puedo usar la brecha de cuadrícula como taquigrafía. Voy a guardar eso y actualizar nuestro navegador, y se puede ver que acabamos de poner algo de espacio entre todo. Podría haber más espacio entre nuestra imagen y el portafolio, el encabezado y la navegación en la parte inferior, y solo viene un poco y acredita un poco más de espacio en nuestro diseño. Eso es prácticamente todo lo que queremos hacer con esta página en su forma actual. No obstante, si salimos de nuestro modo de pantalla completa aquí, y agarro a este tipo y empiezo a hacerlo un poco más pequeño, y más pequeño, y más pequeño, se
puede ver que este no es realmente un diseño amigable para móviles. Lo siguiente que vamos a hacer es actualizar nuestro CSS para que responda al tamaño del navegador, que muestre un diseño que sea apropiado para dispositivos
móviles cuando el navegador es pequeño como este.
8. Cómo hacer una versión de respuesta del proyecto de CSS.: De acuerdo, bienvenido de nuevo a Introducción a CSS Grid. En este video, estaremos viendo cómo podemos hacer nuestro diseño de cuadrícula sea responsable. Es decir,
¿cómo podemos hacer que se muestre bien tanto en navegadores de escritorio como móviles? ¿A qué vamos a mirar ahora mismo? Vamos a ver cómo podemos usar consultas de medios CSS, y las áreas de plantilla de cuadrícula CSS regla juntas para mostrar diferentes diseños en navegadores de diferentes tamaños. ¿Cómo vamos a hacer eso? Bueno, lo que hacemos es redefinir nuestras columnas de plantilla de cuadrícula y áreas de plantilla de cuadrícula, reglas
CSS para que básicamente solo tengamos una columna y luego coloquemos todas nuestras diferentes áreas, una encima de la otra, que es bastante cerca de la forma normal en que las cosas están dispuestas de todos modos. Pero esta es una forma en que podemos usar nuestra plantilla de cuadrícula para reorganizar nuestros elementos cuando el navegador es más grande o más pequeño.Aquí
estamos en nuestro código y voy a meter hacia abajo hacia abajo y crear una consulta media.Digamos que 600 píxeles. Ese puede ser nuestro punto correcto y ahora lo que voy a hacer es configurar nuestro CSS de forma predeterminada a una pantalla móvil y luego cuando nuestro navegador tenga un tamaño máximo mayor a 600 píxeles, entonces podemos tener un diseño de escritorio.Voy a sacar escritorio layout y voy a agarrar eso y poner eso ahí abajo, queremos que esté en el elemento principal. Esto es para escritorio y acaba de poner un pequeño comentario allí.Lo recuerda.Bien y luego volvemos
a subir a nuestras columnas de plantilla de cuadrícula y áreas de plantilla de cuadrícula y decir, bueno, sólo queremos una columna ahora gracias así como eso y luego diremos que tenemos nuestra cabecera. Después tendremos nuestra navegación de portafolio, luego tendremos nuestro portfolio-artículo y luego tendremos nuestro site-nav en la parte inferior. Veamos cómo se ve eso en nuestro navegador. Le daré una recarga a nuestro navegador y podemos ver que seguimos mostrando más o menos la forma que esperábamos para nuestro diseño de escritorio y a medida que lo hago más pequeño, se
puede ver que cambia y podemos ver que nuestro portafolio está en la parte superior. Tenemos nuestro paisaje, retrato, estudio, y enlaces comerciales sentados allí.Entonces ahora tenemos nuestro site-nav abajo. Creo que este texto es un poco pequeño para un dispositivo móvil así que lo arreglaré ahora mismo. Voy a cambiar nuestro tamaño de fuente a dos unidades del
ancho de vista.Pongamos eso en nuestra consulta de medios, vuelta a una ahí y creo que quiero que nuestro encabezado esté centrado para un móvil.Creo que diremos centro y luego iremos aquí abajo y vamos a meter eso allí.Para nuestro escritorio, todavía tenemos nuestra una, dos, tres columnas.Tenemos un encabezado que abarca la primera fila y tenemos nuestro portfolio-nav y portfolio-item y el portfolio-nav abarca hasta el tercero fila y luego nuestra navegación por el sitio, y después hemos dicho que nuestro encabezado estaría alineado a la derecha y tendremos un tamaño de fuente más pequeño. Pero fuera de las definiciones de escritorio. Tenemos una columna, lo siento, y luego cada elemento sentado en su propia fila y hemos centrado todo.Veamos cómo se ve eso en nuestro navegador y ahora recargaré eso y ya terminamos. Tenemos texto más grande para nuestro diseño móvil ahora pero tenemos todo encajando ahí muy bien y no se ve demasiado cuadrado.Por supuesto que cuando nos expandimos de nuevo, todo vuelve a la forma en que originalmente lo diseñamos. Es así como podemos implementar una página web de portafolio usando la cuadrícula CSS.
9. Envoltura de nuestra cuadrícula de CSS: Bueno, ese es el final de nuestra introducción a la grilla CSS. Realmente espero que lo hayas disfrutado y lo hayas encontrado útil también. Durante esta clase, hemos aprendido qué es CSS Grid, cómo podemos usarlo para definir filas y columnas en un diseño web, cómo podemos colocar contenido dentro de nuestras filas y columnas y finalmente, cómo podemos hacer que nuestro diseño se vea genial en escritorio y móvil dispositivos. Ahora, si aún no lo has hecho, ahora sería un buen momento para publicar tu proyecto en la galería de proyectos. Esta es una gran manera de obtener retroalimentación y también de
mostrar tu increíble trabajo a los demás alumnos. Una vez más, realmente espero que te haya parecido útil esta clase y la haya disfrutado y espero verte la próxima vez.
Luke Fabish, Let's get coding!!
