Aprende la cuadrícula CSS

1. Introducción a la clase: [ MÚSICA] Hola, ahí. Nuevamente, bienvenidos. Yo soy Daniel y llevo haciendo con el Mellow One desde hace más de 15 años. Este es mi curso sobre aprender CSS Grid por ejemplo. CSS Grid junto a cuadro de plaga ha simplificado la última forma en que estamos generando diseño de página. El alcance de este curso es darle los conocimientos necesarios para usar CSS Grid en sus páginas web e interfaces. Haré esto construyendo algunos pequeños ejemplos. Empezaremos. Tenemos algunas cosas simples como cómo configurar una cuadrícula básica, cómo definir sus elementos, o cómo colocar elementos dentro de conjuntos. Después de eso, poco a poco avanzaremos a diferentes formas de cómo podemos hacer que nuestras cuadrículas respondan, cómo combinar la cuadrícula CSS con otros gestores de maquetación como Flexbox y Mode. Haremos mucha codificación en las puntuaciones y cada lección tiene sus archivos de ejercicio y soluciones a todo el código. Espero verte en la próxima lección donde comenzaremos a construir sobre el proyecto CSS Grid. [ MÚSICA] 2. Ejemplo 1: introducción de el proyecto: Hola y bienvenidos. Esto es lo que construiremos en este primer ejemplo del curso CSS Grid. En primer lugar, veremos cómo configurar una cuadrícula básica, cómo funciona, cómo definiremos las filas y columnas, y cómo definimos los tamaños. Hablando de tamaños, veremos una característica realmente agradable de CSS Grid llamada minmax que nos permitirá construir diseños receptivos sin usar consultas de medios. Sí, lo has oído bien. Este diseño cambia en función de las dimensiones de la vista, pero no utiliza ninguna consulta de medios. Además, veremos cómo posicionar manualmente los elementos en las celdas o cómo hacerlos extenderse a través de múltiples celdas. Veamos lo que tenemos en los expedientes iniciales para este ejemplo. Cada lección tiene su propia carpeta que contiene un archivo inicial en el que puedes trabajar, y el archivo final que puedes revisar al final de cada episodio. Este es el punto desde el que partiremos. A partir de la lección 1, inicia ese HTML. La estructura HTML es bastante simple. Tenemos un contenedor grande llamado items-grid, y dentro de este contenedor, tenemos algunos divs con una clase de artículo y h4 más una imagen. También hay algunos CSS básicos, solo el color de fondo, algunos bordes y una altura máxima para la imagen. Las imágenes se toman de esta carpeta GOT llamada casas, y aquí se puede ver cada imagen que se utiliza en el ejemplo. Tanto el CSS como el HTML están en el mismo archivo. Pero ten en cuenta que esto es sólo con fines educativos. No hagas esto en un proyecto real. Empecemos a ver cómo podemos pasar de un diseño estructurado como este a esta bonita rejilla que tenemos aquí. 3. Ejemplo 1: configuración básica de cuadrícula: Hagamos de este contenedor una cuadrícula CSS. Para esto, voy a entrar en su clase CSS correspondiente, en este caso, el items-grid, y voy a decir aquí display grid. Si guardamos y vamos a refrescarnos, veremos que por ahora no pasa nada. Esto se debe a que aún no definimos las columnas ni las filas de nuestra cuadrícula. Para definir las columnas, utilizaremos una nueva propiedad llamada grid-plantilla-columnas. Digamos que inicialmente, queremos poner nuestras tarjetas en dos columnas, cada una de 200 pixeles, estableceré un valor de 200 pixeles para la primera columna, y luego después de eso, otro valor de 200 píxeles para la segunda columna. Si voy a guardar y refrescaré, ya verás que todas las tarjetas se muestran en este bonito formato con dos columnas, cada una de 200 pixeles. Podemos venir a uno más, digamos solo por el bien del ejemplo, y aquí agregaré uno más de 200 pixeles y veremos ahora que todas nuestras tarjetas están reorganizadas en este layout con tres columnas. Una cosa interesante a notar es el hecho de que no definimos el número de filas. No establecimos nada sobre el número de filas. En su mayoría se trata de un patrón común porque principalmente definimos solo el número de columnas y el navegador sabrá organizar de forma automática el contenido en base a ese número de columnas. Básicamente aquí teníamos en total 10 cartas y están auto dispuestas en un diseño de tres columnas con cuatro filas, las tres primeras filas tienen tres ítems en ellas, y la última tiene solo un elemento. 4. Ejemplo 1: la unidad FR: No estamos confinados en esta línea para usar solo píxeles. Podemos utilizar cualquier unidad de medida CSS. Podemos usar porcentajes, podemos usar rems, podemos usar unidades viewport, podemos usar cualquier cosa. Por ejemplo, puedo venir aquí y seleccionar todos estos y decir que bien, quiero que cada columna sea de tres rems. Si refresco, veremos ahora que tenemos este diseño en mal estado. Pero la idea es que podamos sumar cualquier tipo de unidades que queramos ahí. Pero vamos a querer tener todo nuestro diseño para expandirse lo más posible en este espacio libre. A lo mejor una idea que podemos pensar es usar porcentajes. A lo mejor intentemos hacer todo aquí del 33 por ciento y ver cómo va. Las cosas se ven mucho más organizadas en este momento. Pero aún así, si echamos un vistazo más de cerca, veremos que el espacio aquí dentro no es del mismo ancho que el espacio aquí dentro. En su mayoría esto se debe a que si agregamos todo aquí, lo que 33 por ciento más 33 por ciento más 33 por ciento, vamos a conseguir 99 por ciento, por lo que todavía tendremos uno por ciento libre aquí. Podemos volver a venir aquí, usar algo como esto para cubrir todo ese espacio. Pero la cuadrícula CSS también viene con una nueva unidad de medida, y esta unidad se llama la fracción, el fr. Si vas a tomar todo aquí y lo reemplazaremos por un fr y nos refrescaremos, veremos ahora que tenemos exactamente el mismo espacio en un lado u otro. Cómo funciona esta unidad separada, es que el navegador toma todo el espacio disponible. Después de eso, divide ese espacio en el número total de unidades fr que se necesitan. En este caso, el número total de la unidad fr es de tres, 1 más 1 más 1. Cada una de las columnas irá exactamente en un tercio de todo el espacio disponible. Ahora, por ejemplo, si tomaremos la columna central, haremos de tres unidades fr y vamos a refrescar, veremos un layout que se ve así. Lo que está sucediendo aquí es que el número total de unidades fr es cinco, 1 más 3 más 1. El navegador tomó todo el espacio disponible y lo dividió en cinco unidades. La primera y la última columna irán por un fr, lo que significa 20 por ciento del espacio. En tanto, la columna central irá en un fr de tres, en este caso, 60 por ciento del espacio. 5. Ejemplo 1: gap con grid: Si nos fijamos en nuestro diseño en este momento, no hay espacio entre las celdas de la cuadrícula. Habrá casos en los que querrás poder controlar el espacio entre las columnas, por lo que el espacio entre las filas. Para lograr esto, podemos utilizar múltiples propiedades. El primero será el espacio de fila de cuadrícula. Utilizándolo, podemos establecer el espacio entre las filas. Diré, quiero tener 50 píxeles de espacio entre las filas. También podemos usar el espacio de columna de rejilla. Como se puede imaginar, esta propiedad, controlamos el espacio entre las columnas. Si voy a guardar y luego refrescar, podemos ver ahora que tenemos el espacio de 50 píxeles entre las filas y el espacio de 10 píxeles entre las columnas. También hay una taquigrafía para los huecos de las filas y las columnas. En lugar de usar dos propiedades diferentes, puedo eliminar esto y decir que quiero usar un grid-gap. Inicialmente, podemos definir el espacio entre las filas, 50 píxeles como era antes, y 10 píxeles para las columnas. Ahora, si guardamos veremos que la salida es exactamente la misma. La única diferencia es que solo hemos utilizado una propiedad en lugar de dos diferentes. Por último, si queremos que este espacio entre las columnas y entre las filas sea igual sólo podemos darle solo un valor de 10 píxeles. Siempre que refresquemos, veremos que ahora hay una diferencia constante de 10 píxeles entre las filas y las columnas de la cuadrícula. Así es como estableces la brecha entre las celdas dentro de nuestra cuadrícula CSS. 6. Ejemplo 1: función repetición: Nuestro diseño en este momento solo tiene tres columnas. Pero en el mundo real, es posible que encuentres situaciones en las que necesitarás algo así como 12 columnas o incluso más. Hagamos que nuestro diseño quepa en cinco columnas. Inicialmente, éste parece bastante simple. Acabo de añadir aquí dos columnas más de 1fr, y si refrescamos verás que todo parece como se esperaba. Pero un inconveniente es el hecho de que esta línea ha comenzado a ser un poco más difícil de leer. Tenemos que contar todo el tiempo cuántos expedientes hay ahí de nuevo. Entonces para situaciones como esta, en lugar de escribir múltiples frs o múltiples columnas, lo que puedo hacer es venir de nuevo y tomar estas columnas de plantilla de cuadrícula y decir que quiero tener una repetición de cinco veces y uno fr. Esta línea, es exactamente la misma que esta. Pero si los miras, el segundo es un poco más fácil de leer. Si eliminaré éste y voy a refrescarme, veremos que el diseño es exactamente el mismo, pero tenemos una línea que es un poco más fácil de leer. La función de repetición también tiene un truco genial. Podemos darle patrones en lugar de valores simples. Lo que quiero decir con eso, digamos que queremos todo el tiempo tener una columna que sea 2fr y después de eso seguido de otra columna que es apenas 1fr, y después de eso, repiten esto patrón uno más. Lo que podemos hacer aquí es venir y decir esa mirada, la primera columna necesita ser de 2frs y después de eso, la siguiente columna necesita ser de 1fr y repetir este patrón, 2 veces. Si voy a guardar y refrescar, veremos que tenemos esta grilla, la primera columna de 2fr después de eso uno de 1fr, después de eso uno de 2fr, y la última es 1fr. Básicamente, repitió este patrón dos veces. También podemos darle patrones si queremos tenerlo así en nuestro código. [ ANTECEDENTES] 7. Ejemplo 1: usando minmax: En este momento, aunque nuestro diseño se vea bastante bonito, tiene un pequeño problema. Si encogemos la ventana, si hacemos la ventana más pequeña, verás que en un momento dado, nuestras cartas se están cortando. Esto se debe a que no tienen suficiente espacio para caber en nuestro diseño de cinco columnas. En su mayoría esto se debe a esta altura máxima, puesta en imagen que también activará un ancho mínimo que cumpla la tarjeta. Lo que queremos intentar es hacer columnas que crezcan a un máximo de un fr, pero nunca, vayan por debajo de un ancho específico. Básicamente, lo que estoy tratando de decir aquí es que usaremos esta función minmax que es una función introducida especialmente para la cuadrícula CSS. Podemos definir que una tarjeta nunca pasará por debajo 300 pixeles y en su tamaño máximo irá por una fr. Si guardamos y actualizamos, todavía podemos ver algunos temas. Aún así nuestro diseño no encaja bastante perfecto, pero al menos ahora las tarjetas están en un ancho mínimo de 300 píxeles. Para corregir también este scroll horizontal, lo que tendremos que hacer es en lugar de decir que todo el tiempo, vamos a encajar todo en cinco columnas utilizaré otra palabra clave introducido para la cuadrícula CSS, y es auto-ajuste. Este auto-ajuste es algo así como tratar encajar tantas columnas como sea posible. Eso irá por un máximo de un fr pero nunca vendrá por debajo de 300 pixeles. Ahora después de refrescar la página, podemos ver que tenemos un bonito diseño de dos columnas que no van a ir por debajo de 300 pixeles. Si hacemos más grande la pantalla, verás que el diseño está tratando de encajar tantas columnas como sea posible con la suposición de que nunca pasará por debajo de 300 píxeles. Usando estos dos, el auto-fit y el minimax, básicamente estamos construyendo un diseño receptivo sin usar consultas de medios. 8. Ejemplo 1: colocación y espada celular: De forma predeterminada, el gestor de maquetación organiza los elementos en una cuadrícula CSS. Pero hay casos en los que querrás que un artículo tenga como una posición específica, digamos que esta tarjeta la Casa Lannister siempre venga como el primer elemento en nuestra cuadrícula CSS. Para lograr esto, agregaré otra clase aquí llamada main. Esta clase principal se establecerá en el ítem que queremos venir primero. Para especificar la posición de un ítem específico, podemos utilizar la columna de cuadrícula que voy a decir este ítem, quiero ser colocado en la primera columna. También podemos usar la fila de cuadrícula si queremos especificar también la fila. Ahora si ahorramos, así que echa un vistazo a esta tarjeta. Cuando refresquemos, veremos que la tarjeta ahora se coloca en la primera columna y en la primera fila. Aún más, podemos usar estas dos, las columnas de cuadrícula y la fila de cuadrícula, para hacer que ese artículo se extienda en múltiples ventas. Si queremos, digamos que éste sea más grande para abarcar, también en esta columna y también en esta fila. Lo que voy a decir aquí, entraré y agregaré un segundo parámetro, diciéndole eso, mira, quiero empezar desde la columna uno y extenderlo a través de dos columnas. Haré exactamente lo mismo con el crudo. Vamos a ahorrar, veremos que ahora nuestra carta inicial se extiende a través de dos filas y dos columnas. Y también jugará muy bien si cambiamos el tamaño de la ventana. 9. Ejemplo 2 : introducción y descripción del proyecto: Veamos qué queremos construir en este ejemplo. Contamos con maquetación para la página de inicio. Layout va en toda la altura de la pantalla y está hecho de cinco secciones. Ahí está esta sección principal de contenido que inicialmente se centra y toma la mayor parte de los bienes raíces de nuestra pantalla. Al lado de otras cuatro secciones secundarias, tenemos izquierda 1, izquierda 2, derecha 1, y derecha 2. Si reducimos los tamaños de nuestra ventana, este diseño cambiará y pasará de diseño de tres columnas a un diseño de dos columnas. Veamos ahora lo que tenemos en los expedientes iniciales para este ejemplo. Tenemos dos archivos, tenemos un índice HTML y el estilo CSS. El índice HTML solo contiene el marcado mínimo necesario para que esta cosa se ejecute. Tenemos un div que es el error de brecha general de nuestro ejemplo y tiene una clase de contenedor. En su interior hay otros cinco divs. Cada div tiene una clase como izquierda 1, derecha 1, izquierda 2, derecha 2. En el medio se encuentra este div principal que contiene la sección principal de nuestro contenido. En el estilo que CSS, son solo algunas propiedades CSS básicas que están dando a esta capa solo el color de fondo para el general seleccionado unos bordes para nuestras celdas y la fuente familia de sans serif. Este es el código que tenemos en estos archivos iniciales. Ahora veamos cómo pasaremos de un diseño simple como este a un contenido bien arreglado como el que tenemos aquí. 10. Ejemplo 2: definición de las áreas de plantilla designadas en una grid CSS: La etiqueta de plantilla de nombre aquí está trabajando definiendo nombres para las secciones en nuestro diseño, y después de eso, asignando elementos a esos nombres. Veamos cómo podemos emular este diseño final. Si le echamos un vistazo, veremos que básicamente tenemos cinco secciones. Tenemos dos izquierdas y derechos, y una sección principal. Si vamos aquí y somos capaces echar un mejor vistazo a cómo se verá la rejilla, nuestros nombres pueden ser algo como esto. Inicialmente, aquí, puedo nombrar esto es el nombre de plantilla A, este es el nombre de plantilla B, C, D. Lo único que es un poco más especial es este nombre de plantilla central, que básicamente es hecho de dos celdas, ambas con el mismo nombre. En este caso, diré que es X. Con esto en mente, volveré en mi ejemplo inicial, y aquí, primero tendremos que ir en el “Contenedor”, y definió el hecho de que se trata de una grilla. Diré, “Display Grid”. El siguiente paso será definir las áreas de plantilla. Diré, “Áreas de Plantilla de Cuadrícula”, y voy a ir agregando una fila a la vez. Inicialmente dijimos que comenzaremos con la sección llamada A. Después de eso tendremos esta X. Iremos si Sección B. A continuación, tendremos nuestra segunda fila con el nombre C, después de eso, X otra vez, y finalmente D. Ahora si actualizamos, el diseño ha cambiado un poco, pero no es en absoluto lo que lo queremos. Esto se debe a que no asignamos el hecho de que se trata de la Sección A, ésta es la Sección B, ésta es la Sección X, y así sucesivamente. Para ello, usaremos el área de rejilla. Voy a venir aquí, de nuevo decir, esta es área de cuadrícula llamada X, y después de eso, agregaré cuatro líneas. Diré aquí que L1 es Sección A, R1 es Sección B, L2 es Sección C, y finalmente, R2 es Sección D. Ten en cuenta que tenemos todas estas clases ya asignadas a los componentes de nuestra rejilla. Esto es L1, esto es L2, y así sucesivamente. Ahora, si “Ahorramos”, veremos que tenemos un layout que está empezando a parecer similar al que queremos tener al final. 11. Ejemplo 2 - Ajustar los filas y columnas tamaños: Si echamos un vistazo al ejemplo final, veremos que hay algunas diferencias a lo que actualmente tenemos en nuestro expediente de trabajo. Una diferencia es el hecho de que estas columnas, la izquierda y la derecha, son más grandes a lo que tenemos aquí. Las áreas de plantilla de cuadrícula se pueden combinar fácilmente con cualquier otra propiedad CSS. Para arreglar este ancho de las columnas, puedo venir aquí y decir grid-plantilla-columnas. Diré que para la primera columna quiero un ancho de 200 pixeles. Para el siguiente, quiero tomar todo el espacio disponible. En este caso, diré que quiero un fr, y para el último, quiero volver a tener 200 pixeles. Si guardamos, veremos que ahora el ancho de nuestras columnas es exactamente el mismo. Otra diferencia para el ejemplo final es el hecho de que éste va todo el camino hasta la altura completa. Uno puede estar tentado a decir que, si aquí las cosas se resolvieron con columnas de plantilla de cuadrícula, puedo venir y usar las filas y puedo decir grid-template-rows. Dado el hecho de que tenemos dos filas que tienen que ir todo el camino 50 por ciento, acabo de decir algo así, la primera fila tiene que estar en un fr y la segunda fila tiene que estar de nuevo en un fr. Pero esto no cambia nada en nuestro diseño. Si ahorramos, el resultado será exactamente el mismo. Esto se debe a que no expresamos el hecho de que este contenedor tenga que contar del 100 por ciento. Podemos venir aquí y decir que la altura para nuestro contenedor es del 100 por ciento de la altura de la ventosa. Si ahorramos, veremos que nuestro diseño ahora va todo el camino de arriba a abajo. Como nota al margen, incluso podemos eliminar la propiedad grid template rows. Porque por defecto, nuestro sistema grid, veremos el hecho de que tiene dos filas y por defecto asignará un fr a cada una de ellas. Hablando de que incluso podemos quitar todas estas declaraciones y las cosas se verán exactamente iguales. Porque cómo funciona el diseño de cuadrícula es que cuando se tiene que colocar un nuevo elemento, digamos que éste dejó uno, lo colocará en el primer espacio disponible. Después de eso, el siguiente será colocar el segundo espacio disponible y así sucesivamente. Pero por ahora, vamos a mantener todo como es para todas estas gafas izquierda y derecha porque necesitaremos que tengan un mejor cortical cuando implementemos la parte de respuesta. 12. Ejemplo 2: elementos de centración en CSS y con flexbox: Los cambios que hemos hecho en la lección anterior efectivamente solucionaron el problema con los tamaños de las filas y las columnas. Pero en nuestro ejemplo final, el contenido se centra dentro de una celda. Es posible que sepas que esto puede ser bastante fácil lograrlo con algo así como un flex de pantalla. En efecto, la cuadrícula CSS se puede combinar con cualquier otro tipo de visualización. Por ejemplo, si voy aquí dentro de un div, y digo que esto tiene un flex de pantalla. Después de eso, voy a decir que el justificación-contenido es centro y también alinear-ítems sigue siendo central. Nosotros ahorramos. Ahora podemos ver que nuestro contenido está muy bien centrado tanto horizontal como vertical, y esto se ha hecho con una pantalla de flex. El moral de la historia es que siempre podemos combinar cuadrícula CSS con cualquier otro tipo de display. 13. Ejemplo 2: diseños responsivos con CSS grid: Una cosa que realmente me gusta de la cuadrícula CSS es cuánto control nos permite tener cuando estamos lidiando con el diseño receptivo. Digamos que nuestro diseño necesita ser cambiado a algo como esto cuando la pantalla está baja en 800 píxeles. Bueno, claro para esto, necesitaremos algún tipo de consulta de medios. Voy a venir aquí bajo el contenedor y aquí en la consulta de medios y decir que cuando nuestra pantalla está baja a 800 pixeles, para el contenedor, quiero tener algunos cambios. Si miramos en el ejemplo final, lo que vemos aquí es que, la izquierda y la derecha se han movido en la fila superior después de eso, el contenido principal es la segunda fila y en la última fila, tenemos la izquierda 2 y la derecha 2 . Si echamos un vistazo a esta área de cuadrícula plantilla, esto está describiendo cómo se ve nuestro diseño. Esto es bonito porque lo que puedo hacer aquí en la consulta de medios es sólo para anular esto. Por lo que voy a decir que nuestra área de plantilla de cuadrícula tiene que ser algo como esto. Inicialmente, en la primera fila, queremos tener a y b. Después de eso, en la segunda fila, necesita llenarse con la x, y finalmente, en la última fila tendrá c y d. Si guardamos, veremos que algunos cambios sí tomaron parte, pero aún así, el layout no parece que queremos que se vea y esto es por esta plantilla columnas que está diciendo al layout que tenemos tres columnas y ellas tienen que estar en tamaños específicos. Pero lo que podemos hacer fácilmente en nuestra consulta de medios, es solo tomar esta grid-plantilla-columnas y decir que queremos auto [inaudible]. Esto mostrará el diseño exactamente como lo pretendemos en el ejemplo final. Más aún, digamos, por ejemplo, si queremos mover este contenido principal en la parte superior, porque no sé que esta es la pieza más importante de todos los contenidos, podemos lograrlo fácilmente simplemente tomando esto, ve y ponlo aquí. Después de eso, si voy a ahorrar, veremos que ahora tenemos el contenido principal muy bien presentado en la actualidad de nuestra página. Como dije, esta es una cosa que realmente me encanta de la rejilla CS. El hecho de que después de definir todos estos nombres, podemos cambiar fácilmente todo el diseño. Solo tenemos consulta de medios de muestra y la propiedad grid-template-areas. 14. Ejemplo 2 : deja una celda vacía y nombrar convenciones: Antes de concluir este ejercicio, me gustaría pasar por unos pequeños detalles con áreas de plantilla de cuadrícula nombradas. En primer lugar, estos nombres pueden ser cualesquiera que sean las palabras que queramos que sean. Acabo de usar aquí sólo letras simples como a, b, c y así sucesivamente, solo en la idea de tener una forma sencilla de escribirlas. Pero por ejemplo, si quiero cambiar éste para probar, las cosas irán como antes. La única condición es que usar el nombre también en la clase correspondiente. Hablando de estos nombres, los nombres distinguen entre mayúsculas y minúsculas. Entonces por ejemplo, si aquí voy a cambiar de x a mayúscula X y voy a ahorrar, veremos que ahora nuestro diseño ha ido al revés. Lo mismo pasa si escribiré x entre comillas, como lo haré para las cadenas en un lenguaje de programación. Un tema común es con el hecho de que a veces queremos en nuestro diseño que una celda no tenga ningún contenido dentro de ella. Entonces, por ejemplo, me gustaría que este Derecho 1 fuera solo una celda vacía. Una solución muy común para esto es simplemente reemplazar el nombre b o cualquiera que sea el nombre para esa celda con solo un punto simple. Pero otra cosa que tendría que ver con esto es también eliminar el contenido real o lo contrario las cosas se romperán. Una cosa menos, hay casos en los que no queremos que la altura del diseño sea la misma que la altura de nuestra página. Sólo queremos, digamos que estas celdas tengan 150 píxeles de altura. Entonces lo que voy a hacer aquí es eliminar esta altura de 100 altura de viewport. Después de eso dentro de una celda, vendré a decir que esto tiene la altura de 150 pixeles. Si guardamos, ahora nos puede confundir el hecho de que este contenido principal no va en la altura tanto de la Derecha 1 como de la Derecha 2. Incluso si aquí dijimos que tenemos x tanto en la primera fila como en la segunda fila. Pero lo que en realidad está sucediendo es que esta altura de 100 píxeles se ha aplicado también al contenido principal. Pero aún así nuestra celda va de una fila a otra.