Conceptos básicos de CSS: primeros pasos en CSS grid

1. Introducción: Me convertí en desarrollador web en 1996. Entonces he crecido con CSS. Yo soy Rachel Andrew. Soy desarrollador web, escritor, y orador y vivo en Bristol en el Reino Unido. CSS Grid es un método de diseño bidimensional. Puede colocar las cosas en filas y columnas al mismo tiempo, y es la primera vez que tenemos algo así en CSS. Cuando vi por primera vez la especificación que se convirtió en CSS Grid, sabía que esto era algo que necesitábamos. Mi experiencia me dijo que a menos que alguien fuera un poco animadora por ello, podría desaparecer. Entonces decidí que sería esa porrista y empezaría a escribir y hablar de algo que realidad no era algo que nadie pudiera usar aún enrealidad no era algo que nadie pudiera usar aúncon la esperanza de que toda la gente se emocionara por ello tal como era yo. En esta clase, te guiaré por cómo empezar con CSS Grid y te mostraré algunas de las principales características de la especificación a través de un pequeño proyecto. Se trata de un diseño básico de bloques que me permite mostrarte algunas de las características de la cuadrícula dentro de un tipo de marco realista. Esta clase será valiosa para cualquiera que trabaje en la web. Ya sea que principalmente hagas desarrollo front-end y quiero que aprendas sobre CSS Grid, o incluso si principalmente haces desarrollo back-end. Será útil si ya sabes un poco sobre CSS. Sabes aplicar CSS a una página y entiendes cosas como selectores y así sucesivamente. Estoy muy emocionado de que te unieras a la clase. Entonces empecemos. 2. Introducción a CSS grid: La forma principal de hacer el diseño antes de CSS Grid era realmente usar floats. Ahora para flotar cualquier elemento flotante, se moverá hacia arriba. Seguro que puedes flotar una cosa y luego puedes flotar otra cosa junto a ella, y puedes crear sistema que se parezca a una cuadrícula. Para hacer eso, necesitas conseguir todo un ancho. cada uno de tus artículos, le das un ancho y luego los flotas uno al lado del otro, y así lo que terminas con parece una cuadrícula. No hay cuadrícula real en la página, lo que tienes ahí es solo un montón de artículos todos empujados para parecer una cuadrícula. medida que avanzamos de eso, entonces conseguimos libros de Flex que mucha gente aclamó como una gran manera de crear cuadrículas en la Web, pero tampoco es un buen marco. Te permite crear rejillas más fácilmente que las de flotadores, pero sigues dando un ancho a las cosas y empujándolas. Entonces, eso es lo que haríamos en hacer diseño hasta que obtuviéramos CSS Grid. CSS Grid es un método de diseño bidimensional para la web. Dos dimensiones significa que podemos diseñar las cosas en columnas pero también en filas al mismo tiempo, y es la primera vez que realmente tenemos algo así para la web. CSS Grid ya está disponible en todos los navegadores modernos. Tiene muy muy buen soporte de navegador. Si estás aprendiendo a ser desarrollador web hoy o incluso si estás empezando un nuevo proyecto hoy, realmente hay muchas razones para no estar usando Grid. Entonces, esto una cosa a estar mirando para estar entendiendo cómo usar, porque mucho es cómo se van a hacer las cosas en el futuro. Por lo que este entorno es CodePen, es un sitio de código compartido, puedes firmarlo para una cuenta gratuita. Lo bonito de CodePen es que si encuentras algo en lo que te gustaría el look de y con lo que te gustaría experimentar, puedes crear tu propio fork de código de copia, y eso te permite jugar y editarlo y hacer cosas para usar como punto de partida para tu propio trabajo. Entonces la forma en que vamos a trabajar es que he creado un punto de partida. Para llegar a este ejemplo, basta con utilizar el enlace que se encuentra en la parte inferior de la pantalla y también encontrarás esa URL en la descripción cruzada. Entonces este es el sitio en el que vamos a estar trabajando, pero he quitado todo el layout. Entonces tenemos algo de CSS aquí pero no tenemos el CSS que crea diseño. Ahora, si nos desplazamos hacia abajo, se puede ver que tenemos todas las imágenes y todo el contenido. Esto se presenta en el diseño de bloques, que es que las cosas dispuestas no soplarán la otra, que es la forma predeterminada que las cosas se distribuirán en CSS si no se crea ningún diseño. Entonces mientras estamos en CodePen, podemos echar un vistazo alrededor de cómo funciona CodePen. Ahora, cuando vayas por primera vez al ejemplo, vas a ver algo como esto, y si haces clic en el botón Tenedor en la parte superior, eso creará tu propia copia. Entonces, ahora, puedes trabajar en esa copia que guardaste en tu cuenta de CodePen, que puedas volver a ella más tarde, y significa que puedes hacer cambios y seguir junto con todas las lecciones sin cambiar el punto de partida predeterminado real. Si las cosas se estropean todo y quieres volver a intentarlo o quieres probar algo completamente diferente con el ejemplo, solo puedes crear otro Tenedor y empezar todo de nuevo. Pero mira los diferentes paneles aquí en la parte superior. Este es el HTML del documento. Por lo que se puede ver todo el HTML utilizado para marcar el contenido. Aquí está el poste al fondo y ahí está esa barra lateral. Entonces el fondo aquí, tenemos el CSS. Aquí es donde vamos a pasar la mayor parte de nuestro tiempo en esta lección. Estaremos pasando por el CSS y agregando cosas a los selectores que ya tenemos aquí y haciendo cambios a eso. Si comienzas a editar el código del ejemplo original, entonces CodePen esencialmente creará un Fork para ti porque no puedes cambiar el código del ejemplo de otra persona sin su opinión. Entonces, no necesitas preocuparte por alguna vez estropear el código de otra persona en CodePen. Siempre vas a crear tu propia versión del documento. Pero podría ser bastante útil si solo creas gente de tus propias cosas, porque entonces puedes tener múltiples copias mientras trabajas a través de las cosas y luego retrocede a la versión anterior si quieres cuando tienes un problema. CodePen intenta guardar automáticamente tu trabajo. De hecho a veces mientras estás trabajando, posible que veas un pequeño mensaje en la parte superior diciendo que es auto saving o pidiendo que guarde. Si quieres asegurarte de haber guardado el punto en el que estás, siempre puedes hacer clic en el botón Guardar en la parte superior, y eso asegurará que el trabajo que has estado haciendo se haya guardado. Si cuando vienes a CodePen por primera vez, el panel JavaScript aquí está abierto. No vamos a estar escribiendo ningún JavaScript hoy, siempre podrías simplemente sacarlo del camino minimizándolo y desaparecerá. De igual forma, si cuando realmente estás trabajando en CSS, si quieres hacer un poco más de espacio, incluso podrías minimizar el panel HTML si quieres, y simplemente sacarlo del camino si vas a conseguir una pantalla pequeña para trabajar, para maximizar el espacio que tienes para trabajar. Por supuesto, obviamente puedes arrastrar estos paneles alrededor para hacer un poco más de espacio para ti. Voy a cambiar al modo de presentación en CodePen porque eso me va a permitir mostrarte el texto y el CSS un poco más grande lo que te será más fácil decir. De lo contrario, todo funciona de la misma manera. Entonces, antes de empezar a aprender realmente sobre el CSS, solo te voy a mostrar un poco alrededor de nuestros documentos y cómo funcionan las cosas. Entonces, en la parte superior aquí, tenemos el HTML del documento. Ahora la forma en que funciona el CodePen es que no se incluyen las etiquetas de cuerpo, y aquí están las partes de un documento HTML con las que podría estar familiarizado. Por lo que en realidad sólo empezamos con lo que hay dentro del cuerpo del documento. Entonces, tenemos aquí nuestro encabezado el cual incluye nuestra navegación. Se puede ver la navegación aquí. Entonces, por ejemplo, tenemos artículos, y aquí hay artículos en el HTML. Entonces tenemos el título que es un H1, eso es una entrada de blog, y aquí es donde iniciamos el documento principal. Entonces, tenemos una imagen de envoltorio de clase, y eso ha notado menos la clase de destacados, y esa es nuestra característica Dyson. Entonces, aquí están. Estas van a ser el tipo de entradas de blog con una imagen y un enlace para hacer click. Para que aquí dentro, eso en realidad marcado como lista, porque lo que es esta UL, eso es lista desordenada, y luego tenemos ítems de lista, artículos de temporada. Se puede ver que tenemos imágenes ahí dentro con la etiqueta de imagen img. Entonces puedes seguir mirando a través de esos, y desplazándote hacia abajo, y aquí tenemos nuestro artículo con una clase de post, y ese es el artículo que está aquí abajo. Entonces ese es el contenido principal de nuestro diseño. El panel inferior aquí es nuestro CSS. Para que puedas ver nuestros selectores CSS como HTML. Aquí estamos configurando una fuente para todos los CSS va a tener la misma fuente, Open Sans. Trabajamos abajo, tenemos un montón de cosas en el menú. Tenemos cosas como colores de fondo y así sucesivamente, cosas que forman parte del diseño pero están agregando un poco de estilo a estos documentos para que no tengamos que escribir absolutamente todo en estas lecciones. Entonces este es nuestro CSS y principalmente, vamos a estar trabajando en este panel, haciendo cambios o agregando nuevos selectores y nuevas reglas para nuestros selectores ahí. El motivo por el que elegí una entrada de blog es que pensé que esto es algo bueno, que mucha gente tiene un sitio personal y si solo estás aprendiendo a desarrollarte para la web, creando un sitio personal como este, es un muy buena manera de realmente jugar alrededor y aprender nuevas habilidades. De hecho, a menudo es donde empiezo con algo nuevo. Empezaré en mi sitio personal, jugaré con algo nuevo y veré cómo funciona antes tal vez podría usarlo en un sitio de producción para un cliente. Puedes sentirte libre de tomar esto y usarlo simplemente reemplazando las imágenes y haciendo algunos cambios si quieres usar fuera en tu propio sitio, o simplemente usar pequeñas partes de él como punto de salto para cosas que quieres agregar a tu diseños propios. Entonces de vuelta en tu opinión en CodePen, si quieres tomar el trabajo que has hecho y luego aplicarlo realmente a tu sitio web, hay un pequeño enlace de exportación aquí, y así, puedes exportar eso como él, y eso te permitirá se descarga todo el HTML y CSS, para que pueda ser subido a un servidor en algún lugar. A menudo uso CodePen como una forma de hacer pequeños experimentos, que luego voy a tomar, en realidad uso probablemente en otro lugar. siempre puedas hacer eso, siempre puedes agarrar un zip del del trabajo que has estado haciendo. Ahora que sabes un poco sobre CodePen y el entorno en el que vamos a estar trabajando, pasemos a la siguiente lección donde te voy a mostrar cómo definir tu Grid. 3. Definir tu cuadrícula: Cuando iniciemos alguno de estos ejemplos, habrá un ul en pantalla, que es el punto en el que la demo es ahora así donde estoy. Entonces, para este ejemplo, estamos empezando justo al principio con el código que te mostré en la última lección. Ahora, si lo deseas, solo puedes usar este código y trabajar justo a través de todas las lecciones usando este documento, o si lo deseas, puedes retomar con un nuevo ejemplo, que es mi punto de partida para cada documento, y nosotros mostrarte que ul en la pantalla con cada lección. En esta lección, les voy a mostrar cómo definir una cuadrícula. Porque para empezar a usar GridLayout, necesitamos decirle al navegador que queremos usar la cuadrícula CSS. Entonces, te mostraré cómo definir una cuadrícula y usar columnas y filas para configurar la cuadrícula con la que trabajarás en la página. Entonces, vamos a empezar a crear una cuadrícula en esta página. Estamos tenemos dos cuadrículas diferentes en la página. Va a haber la cuadrícula que contiene los elementos destacados en la parte superior de la página, y luego va a haber una segunda cuadrícula para lidiar con el diseño de nuestro artículo por abajo. Entonces, empecemos. Entonces, lo primero que quiero hacer es trabajar con esos artículos destacados. Entonces, si nos desplazamos hacia abajo en el CSS, encontrará.featured. Ahora, esa es la clase que suministró al ul aquí, tenemos clase ul destacada, eso va a apuntar a esos artículos destacados. Ahora, por el momento, lo que he hecho es que he eliminado el estilo predeterminado que obtienes en una lista. Yo he quitado la bala y el margen y el relleno. También he agregado un color de fondo, y veremos por qué a medida que empezamos a crear nuestra cuadrícula. Entonces, para empezar a usar grid, solo le decimos al navegador que queremos usar grid, y eso lo hacemos con display grid. Eso significa que ahora estamos usando GridLayout, aunque nada va a haber cambiado en el diseño, porque lo que realmente hemos creado ahora es que hemos creado una cuadrícula de columnas única, y así que eso realmente no ha cambiado el diseño. Entonces, para cambiar el diseño cuando empieces a agregar algunas filas o columnas. Si ves el autosave pop up en CodePen, eso significa que CodePen ha empezado a guardar tu documento para ti mientras estás trabajando. Siempre puedes hacer clic en Guardar en la parte superior si quieres asegurarte de que tu trabajo esté guardado. Entonces, ahora vamos a crear algunas columnas en la cuadrícula. Ahora, lo hacemos con una propiedad llamada grid-templada-columnas. El valor que toma grid-templada-columnas se denomina listado de pistas. Entonces esa es una lista de tamaños de pista. Ahora, voy a parar haciendo esto en píxeles porque quiero mostrarles la diferencia entre las diferentes formas de dimensionar nuestras columnas. Entonces, vamos a crear algunas pistas, y las crearemos a 300 píxeles. Como ves ahora, el CodePen ha actualizado nuestro layout. Este es el bonito, piensa en usar CodePen. No tenemos que recargar el navegador para guardar los cambios, lo hace por nosotros. Se puede ver que tenemos algo que se parece un poco a una grilla. Lo que tenemos, son cuatro pistas cada turno 300 píxeles, y vamos a empezar a diseñar nuestro contenido en esas pistas, y después de que tengamos cuatro elementos, aquí se muestran a través de una fila, lo que solo crea una segunda fila y pone este artículo en la parte inferior de la misma. Entonces, con tan solo dos líneas de CSS somos capaces de crear algo que se parece a una cuadrícula. Algo más que te gustaría hacer aquí es agregar un hueco. Tengo ese color de fondo en la zona porque eso va a significar que puedo dejar que eso brille al tener un hueco. Entonces, si digo, GRID-PAP, en este caso, sólo voy a hacer una brecha de un píxel. Entonces, parece que tenemos una línea entre nuestros artículos. No obstante, puedes usar cualquier unidad de longitud aquí. Si quisieras un gran hueco, podrías decir, usa 10 píxeles, y eso espacia los elementos hacia fuera. Entonces, esa es la gran propiedad gap. En este caso, vamos a bajarlo a un píxel. Por lo que parece que cortamos la frontera entre los artículos. Debido a que CodePen actualiza automáticamente el diseño para nosotros, realidad se puede ver cómo la cuadrícula está creando pistas de columna, esencialmente a medida que tecleamos. Entonces, para nuestros propósitos queremos tener estas cuatro pistas. Pero obviamente podrías tener tantas pistas como quisieras en tu grilla. A medida que vamos, CodePen sólo va a actualizar eso, y cambiar el diseño a medida que avanzas. Entonces, tienes una cuadrícula en tu página, pero en realidad puedes ver realmente la cuadrícula, no hay forma en GridLayout de mostrarte todos los bordes de la cuadrícula. No obstante, aquí estoy trabajando en Firefox, y si vas a usar GridLayout, realmente te recomendaría descargar una copia del navegador web Firefox, porque Firefox tiene excelentes herramientas de desarrollador lo que lo harán mucho más fácil para que trabajes con rejilla. Por supuesto se puede trabajar con la grilla CSS, y no usar Firefox. Chrome tiene algunas herramientas de desarrollador más simples para GridLayout, pero me parece realmente útil trabajar con las herramientas de Firefox cuando estoy usando grid. Encontrarás que diferentes navegadores se han centrado en cosas diferentes para sus herramientas de desarrollador. Entonces, chrome es realmente genial para comprobar el rendimiento de sus páginas, y el has construido un montón de herramientas de rendimiento. Firefox se está concentrando en el diseño y las herramientas para los diseñadores. Por lo tanto, tener múltiples navegadores, no solo es útil para las pruebas del navegador, en realidad puede ser útil para el desarrollo también. Abriremos estas herramientas de desarrollador a lo largo del curso, porque es una forma muy útil para que veas lo que está pasando en el navegador mientras trabajas con GridLayout. Entonces, podemos echar un vistazo a esos. He hecho clic derecho en un área de mi cuadrícula y voy a decir, Inspeccionar Elemento. Eso abre este panel en la parte inferior del navegador. Ahora, este es el panel de herramientas para desarrolladores de Firefox, y puedes ver aquí el html del documento, y sobre el otro lado, tenemos CSS. Entonces, si vamos al layout, entonces vamos a la sección de cuadrícula aquí, y esta es la ul.featured, así que esa es nuestra área destacada. Si hago clic en eso, Firefox muestra las líneas de cuadrícula para nosotros. Entonces, esto es realmente útil porque podemos ver todas las diferentes partes de nuestra cuadrícula y conseguimos un poco de representación de tu cuadrícula, aún así puedes pasar el rato sobre cualquier parte de la cuadrícula. Entonces, vale la pena en este punto pasas por alguna de la terminología que tenemos en GridLayout. Cada una de estas áreas es una Celda Grid, y se puede pensar en eso es un poco como una celda de mesa realmente. Es el área más pequeña que puedes tener en la cuadrícula entre las líneas. Entonces, tenemos Líneas de Cuadrícula, y las líneas están numeradas. En realidad podemos encender en Firefox los números de línea. Entonces, puedes ver aquí cómo se conocen nuestras líneas. Tenemos cuatro pistas en nuestra cuadrícula, y así empezamos con la línea 1 a la izquierda, y nos movemos a través, por lo que la línea 5, es la línea final. Las pistas son cualquier área de la cuadrícula o cualquier fila de columnas. Una fila Individual o una columna individual se denomina pista. Entonces, tenemos una pista de columnas aquí entre las líneas 1 y 2, y luego tenemos una pista de fila aquí, entre estas líneas 1 y 2. Entonces, cuando hablo de pistas, de eso hablo. Hablo de cualquier columna o fila individual en la cuadrícula entre dos líneas. Entonces, pasemos a crear la otra cuadrícula en nuestra página. Cerraré estas herramientas por ahora. Entonces, la otra cuadrícula va a tratar el diseño de nuestro artículo. Si nos desplazamos hacia abajo por el html, podemos ver que el artículo está dentro quedándonos con una clase de contenido. Entonces, a eso vamos a estar agregando reglas CSS. Ahora, no tengo contenido en la herramienta CSS. Entonces, podemos agregar eso a otro selecto.content. Entonces, vamos a crear una cuadrícula, y simplemente hacer algo de diseño sobre esto. Entonces primero, lo voy a empujar un poco hacia abajo con un margen superior. Entonces, solo estoy agregando un margin-top para 40 píxeles lo que movería eso un poco hacia abajo. Entonces de nuevo, vamos a crear una cuadrícula. Voy a crear una grilla pap otra vez. Esta vez voy a usar porcentajes. Entonces, vamos a crear una brecha de cuadrícula del cinco por ciento. Entonces para ver realmente algo que suceda en nuestra cuadrícula, nuevamente necesitamos usar grid-templada-columnas, y vamos a usar porcentajes. Entonces, voy a crear una pista de columnas más grande del 70 por ciento, y luego una pista de columnas más pequeña del 25 por ciento. Esto pone nuestra barra lateral al lado de nuestro contenido. Eso es hasta donde vamos a llegar con eso en esta lección. Vamos a echar un vistazo en la siguiente lección, a cómo podemos mejorar este diseño usando algunas cosas que forman parte de la cuadrícula. Antes de pasar de este ejemplo, sólo voy a explicar algunas cosas sobre cómo se están poniendo las cosas en este punto. Entonces, por el momento, lo que tenemos es que tenemos a rejillas que están definiendo estas restricciones externas de estos diseños, pero aún no hemos empezado a cambiar lo que está sucediendo dentro de las propias Celdas de Grid. Entonces, las imágenes que tenemos aquí son un conjunto de fotografías de globos, he tomado, `vengo de Bristol, y cada año tenemos una gran fiesta de globos, lo que me da una gran biblioteca de fotos de globos para usar. Pero obviamente puedes intercambiar tus propias imágenes, puedes subir activos a CodePen, o puedes enlazar a cualquier imagen que hay en la web que estés deseando usar para reemplazar estas. Eso es sólo un enlace a una imagen aquí. Si estabas queriendo subir activos en CodePen, solo saltaré a esta vista que se parece más a la vista que estás viendo. Si haces clic en activos, obtienes un panel de activos que tiene varios activos de diseño que existen realmente en CodePen que puedes elegir usar. También puedes subir los tuyos propios, puedes arrastrar y soltar archivos, y luego tienes un montón de archivos que puedes elegir entre los que has agregado, lo que lo hace más fácil. Si tienes un montón de cosas que quieres usar en ejemplos, solo puedes agarrarlas, y guardarlas aquí. Pero también puedes usar las cosas que CodePen ha proporcionado también. Ahora es el final de los conceptos básicos de definir una cuadrícula. Podemos pasar a la siguiente lección donde realmente podemos empezar a refinar este diseño entendiendo el tamaño de pista. 4. Definir el tamaño del elemento para pistas: Puedes comenzar esta lección usando el ejemplo en el que estabas trabajando en la última lección si estas siguiendo estas hasta la otra, o puedes usar la URL en pantalla para recoger exactamente donde estoy ahora. En la última lección, creamos una cuadrícula usando un tipo familiar de unidades de longitud, por lo que píxeles y porcentajes. En esta lección, vamos a refinar la cuadrícula y utilizar un método de dimensionar pistas se ha creado para el diseño de cuadrícula que en realidad hace las cosas mucho más fáciles. Entonces, si nos fijamos en nuestro layout que hemos creado ahora, porque tenemos estas cuatro pistas que son de 300 píxeles, tenemos este hueco al final. Ahora bien, si queremos que creéis un layout que fuera a reflexionar, la forma en que haríamos eso en cuadrícula completa es tendes a usar porcentajes también si usas al fondo aquí. Entonces, se puede ver que debido a que hemos utilizado porcentajes, estas pistas crecen y se encogen. El problema con los porcentajes es que hay que resolverlos por ti mismo. Tienes que averiguar cuántas necesidades de seguimiento porcentual y luego tipo de subirlas y luego asegurarte de que no obtienes más del 100 por ciento. Si obtienes más del 100 por ciento, probablemente obtienes una barra de desplazamiento. Entonces, GridLayout ha introducido un nuevo dimensionamiento de pista. Eso es usar algo llamado la unidad FR, y eso es a lo que vamos a empezar a echar un vistazo. El módulo FR es una unidad flex, define una longitud flexible y se ocupa de distribuir espacio en el contenedor de rejilla. En la mayoría de los casos, si estás usando GridLayout, y estás pensando que tal vez quieras usar porcentajes, entonces la unidad FR te dará unos resultados más consistentes y te ahorrará tener que calcular todo. Por ejemplo, si desea agregar una pista adicional, eso es fácil con la unidad FR. Con porcentajes, hay que recalcular todo. Entonces, en la mayoría de los casos, elegiría usar la unidad FR. El único momento en el que recomendaría usar porcentajes es donde estás usando GridLayout junto a otros métodos de diseño que tienen que usar porcentajes. Por ejemplo, tienes un diseño de bootstrap flotante y quieres poner un componente GridLayout en medio de él, entonces podrías elegir usar porcentajes para que coincida con el resto de tu diseño. Pero la mayoría, el resto del tiempo, iría por la unidad FR. Te ahorrará mucho tiempo. Fue realmente difícil en los métodos de diseño anteriores mezclar cosas de tamaño fijo y cosas flexibles cuando estábamos usando porcentajes y eso es algo que la unidad FR hace muy bien para nosotros. Entonces, por ejemplo, podrías tener un pequeño icono que siempre quieres tener 50 píxeles de ancho, bueno eso está bien porque puedes hacer que el resto del contenido sea un FR y absorberá todo el espacio disponible dejando arreglado la cosa de tamaño fijo sin entonces causar una barra de desplazamiento. Entonces, si primero echamos un vistazo a nuestros artículos destacados aquí. Si los encontramos en el CSS y aquí está nuestro tamaño de pista de 300 píxeles. Ahora, voy a cambiar estas pistas para usar esta nueva unidad, la unidad FR, y voy a crear cuatro pistas una FR. Se puede ver que el diseño empieza a cambiar, por lo que debería llenar la ventana del navegador. El motivo que está sucediendo, es que la unidad FR distribuye el espacio disponible. Entonces, grid ha tomado todo el espacio disponible en nuestro contenedor de rejilla, que se extiende justo a través de la página. Porque tenemos cuatro pistas, todas de una FR, se le da una parte a cada una de las pistas. Si estiras y encoges la ventana de tu navegador, puedes ver cómo eso es agradable y receptivo, crece y se contrae de acuerdo al espacio disponible que tengamos. Si tus pistas están dimensionadas en píxeles, entonces son esencialmente fijas. Entonces, si lo terminamos con muy poco espacio, bueno, sólo se va a desbordar. Como puedes ver, eso es crear una barra de desplazamiento y también está saliendo del diseño que es lo que pasaría si tienes pistas fijas. Apenas este tipo de situaciones, que la unidad FR resuelve, solo nos permiten compartir los espacios disponibles, ya sea una gran cantidad de espacio o una pequeña cantidad de espacio. Entonces, esa es la parte superior del layout, ahora utiliza mucho el espacio disponible y las pistas son agradables y flexibles. Entonces, echemos un vistazo a nuestro área porcentual, así que este es el contenido aquí abajo, para el cual hemos utilizado porcentajes. Ahora, podrías cambiar eso para usar las unidades FR también. Entonces, voy a cambiar esto a tres FR, uno FR. Ahora, lo que esto hace, es que dice que toman todo el espacio en el contenedor y dan tres partes del espacio a la primera pista, que es nuestra pista que es más grande, y una parte a la segunda pista. Entonces, puedes jugar con esto si tuvieras dos partes para esa primera pista y una parte para la segunda pista. Lo que está pasando aquí es que todo el espacio se está dividiendo en tres y dos partes nos da la primera pista, y una parte, la segunda pista. Entonces, creo que tres FR, uno FR me da el tipo de maquetación que quiero. Entonces, vale la pena saber la respuesta, aquí tenemos una gran brecha del cinco por ciento, podrías dejar eso o podrías decidir tener una brecha de tamaño fijo. Lo que pasa aquí es que la cuadrícula mira esa brecha, y dice: “Bueno, todo nuestro espacio está disponible, necesitamos quitarnos 40 píxeles porque eso es necesario para llenar el vacío”. Entonces lo que queda se distribuye de acuerdo a estas unidades FR. En realidad puedes mezclar pistas de tamaño fijo y pistas FR. Entonces, si siempre quisiéramos que nuestra barra lateral fuera de 300 píxeles, podríamos tener una sola pista FR y una pista de 300 píxeles. Entonces como tenemos menos espacio, se puede ver que la pista de 300 píxeles siempre se queda dentro de los píxeles, y es el resto del espacio lo que se le da a la otra pista. Entonces, estas unidades FR son realmente útiles y nos ayudan a hacer diseños que crecen y se encogen con el espacio que tienes disponible sin que necesites hacer las matemáticas. Entonces, que fue el caso cuando estabas trabajando con porcentajes. La unidad FR es absolutamente esencial para aprovechar la grilla CSS. No teníamos necesidad de decir esto en los métodos de diseño anteriores porque realmente no hubiera funcionado. No teníamos el espacio para distribuir. Entonces, ahora tenemos eso para grid, sí úsalo y aprovecha la potencia que te da. Ahora ya sabes de la unidad FR. Entonces, la siguiente lección, vamos a empezar realmente a colocar elementos en la cuadrícula, y anidar una cuadrícula dentro de otra. 5. Anidar cuadrículas y ubicar elementos: Si estás siguiendo, puedes continuar con el ejemplo en el que has estado trabajando, o puedes usar la URL en pantalla para encontrar un ejemplo de exactamente dónde estoy ahora. En la última lección, aprendiste sobre el dimensionamiento de pistas, y empezamos a hacer flexible nuestra cuadrícula. En esta lección, vamos a empezar muy a afinar el diseño, y trabajar en algunas de las partes internas del diseño anidando rejillas y posicionando elementos. Entonces, ahora vamos a echar un vistazo a los internos de estas cajas. Hemos creado una cuadrícula en lo [inaudible] de esta área, y la cuadrícula está colocando los elementos dentro de ella. Pero, no parece del todo que queremos todavía. Nos gustaría que este título superpusiera la imagen, y también queremos conseguir las imágenes, para que todas se alineen y todas se vean del mismo tamaño. En eso vamos a estar trabajando aquí. Entonces, lo que vamos a hacer es, en realidad vamos al nido una rejilla dentro de otra. Esto es algo que está absolutamente bien de hacer. Puedes tener tantas rejillas anidadas dentro de la otra como quieras. Ahora, vamos a crear diseños más complejos. Entonces, nuestra parrilla principal está en destacados, y así nuestra siguiente grilla va a estar en el li que está dentro destacado. Entonces, al igual que antes, vamos a usar la cuadrícula de visualización. Entonces, vamos a empezar a crear esta vez, algunas pistas de fila en la cuadrícula. Hacemos eso con filas de plantillas de cuadrícula, que es igual que las columnas de plantilla de cuadrícula. Voy a crear dos filas. Entonces, tenemos una fila que es un fr, y luego tenemos una fila que es 5em. Se puede ver que algo está empezando a suceder sin cuadrícula que codifica panel empezando a redimensionar las pistas. Si no te has topado con la unidad em antes, esta es solo otra unidad de longitud en CSS. Corresponde al tamaño del texto, que es bastante útil. Porque significa que si hacemos nuestro texto más grande, la pista real aumentará de tamaño. Es un dimensionamiento bastante útil, y vamos a estar jugando. Como puedes ver, esta pista aquí se ve un poco corta y cortada, pero estaremos jugando con cómo creamos ese dimensionamiento a medida que pasamos por la construcción de este diseño. Entonces, ahora tenemos una cuadrícula de pista de dos filas dentro de cada uno de estos artículos tamaño. Entonces, echemos un vistazo al buen elemento inspect, porque esa es una buena manera de ver realmente cómo funciona eso. Entonces, se puede ver que es nuestra cuadrícula principal, que es la de destacados. Pero, también tienes estas rejillas individuales dentro de los artículos. Entonces, podemos encender uno de esos, y se puede ver en ese artículo, tenemos esa cuadrícula de dos vías. Aquí hay una pista, y aquí está la pista de segunda fila. Entonces, eso es lo que vamos a trabajar con lo que vas a posicionar los ítems usando esas líneas de cuadrícula. Entonces, ir a trabajar con la imagen, que está aquí. Tenemos un div para la clase de imagen. Lo que queremos hacer es estirar eso sobre las dos filas. Entonces, vamos a usar grid-row, y así, empezamos en la fila de la línea uno, y terminamos en la fila de la línea tres, y eso va a entrar en una columna de cuadrícula. Entonces, quiero hablar de eso un poco rápido. Entonces, fila de cuadrícula es una taquigrafía para inicio de fila de cuadrícula y fin de fila de cuadrícula. Entonces, uno es la línea uno. Estamos empezando en la línea uno, y estamos terminando en la línea tres. Si ponemos Firefox, aquí atrás, y hacemos eso, estamos empezando en la línea uno, y estamos terminando en la línea tres. Entonces, qué cuadrícula ha hecho, porque no hemos posicionado este título, en realidad lo empujó, ha creado una nueva pista de fila en la cuadrícula, y se empuja esa leyenda ahí abajo, que es lo que sucederá por defecto. Grid no superpondrá las cosas, a menos que se lo pidas. Siempre creará una nueva pista y pondrá el artículo en esta sobra. En realidad tienes que pedirle a grid que haga cualquier superposición en absoluto, para que no termines con cosas apiladas. Ese es más o menos el camino con CSS. Tratamos de no apilar tu contenido u ocultar cosas detrás de otras cosas, a menos que tú lo hayas pedido. Ahora, sólo necesitamos decir iniciada línea uno para columnas, porque sólo queremos abarcar una pista, y ese es el predeterminado. Piensa abarcar una pista por defecto. Entonces, si decimos comenzar en la línea de columna uno, empezará en la línea de columna uno, y terminará en la línea de columna dos, por lo que en realidad no ponemos la línea final explícita. También queremos que la imagen cubra toda el área en lugar de tener este espacio en blanco debajo. Ahora, vamos a usar, no parte de la cuadrícula, esta es una parte diferente de CSS, pero hay una forma de hacer que una imagen se estire y cubra todo un área. Eso es usar una propiedad llamada ajuste de objeto. Entonces, si apuntamos a la imagen real en sí, y voy a decir que ajuste de objeto, cubra, y lo establecemos al ancho y alto del 100 por ciento, puedes ver ahora que nuestra imagen se escala hacia arriba y entra en la forma de la caja, y entonces básicamente se recortará a sí mismo. Porque de lo contrario, terminarías con la imagen estirada fuera de lugar, no es lo que quieres. Ahora, seguimos peinando esto. Ya verás cómo funciona esto. Entonces, hemos puesto eso a la cobertura de ajuste a objetos. Entonces, ahora podemos lidiar con la leyenda, que queríamos levantar y tener superponiendo nuestra imagen. Entonces, si vamos a nuestra leyenda, y voy a poner esto en cuadrícula fila dos. Ves cuadrícula ahora necesita ser puesta en otra pista de columna, porque no quiere superponerla. Entonces, si quieres superponerlo, también necesitamos establecer la columna en una. Ahora, tenemos nuestra leyenda colocada encima de la imagen, y he usado estos colores RGBA aquí, y RGBA significa que podemos establecer el canal alfa de todos los fondos. He ajustado a 0.6, que lo hace semi transparente, permite que las imágenes ahí brillen. Voy a hacer una última cosa para ordenar esto y darnos imágenes y bonito tipo de apretado fijo lo que ayudará a mantenerlas en proporción entre sí. Entonces, si volvemos a nuestra cuadrícula original, así se destaca esto, que es la cuadrícula principal aquí, que tiene los artículos. Voy a encontrar algunas filas. Por defecto, todas las filas tienen un tamaño automático, y se puede pensar en el tamaño automático, lo que significa que las cosas crecerán para ajustarse al contenido que hay dentro de ellas. Es posible que quieras cambiar eso, y así en este caso, voy a establecer algunas filas, y voy a hacerlas de 250 píxeles de altura. Eso entonces, empieza a darnos el layout que queremos. Tenemos estas bonitas imágenes ordenadas. Tenemos alturas de fila establecidas, y tenemos las subtitulaciones superponiendo las propias imágenes. Tan solo para terminar esta sección, quiero mostrarles otra pequeña característica de cuadrícula-layout. Entonces, se puede ver en este epígrafe, tenemos algo de texto extra aquí, que se está acercando muy al fondo. Porque hemos establecido estos para que sean 5em, que es una longitud absoluta. No se va a hacer más grande que eso. No es como la unidad fr, o algo que respondiera al tamaño del texto. lo que realmente me gustaría es tener algo al que irá de altura fija. Pero si pongo más texto en, me gustaría que se expandiera y que hiciera frente a ese texto. Porque, esa es la realidad de trabajar en la web, es que a veces más texto, conseguir ver. Podemos ver qué pasa si solo agrego un poco más de contenido. No es ideal en la web tener contenido que sea una altura fija en general, porque no tendemos a saber qué tan grande va a ser el texto, ni en cuánto texto va a terminar. Puedes planificar cuidadosamente tu diseño, y luego se mete en el sistema de administración de contenidos, y así pone mucho más texto del que esperabas. Entonces, grid nos da una manera de lidiar con eso. Para producir una buena plantilla filas, tienes estos 5em valor. Ahora, lo que me gustaría es que, para convertirse en mínimo, me gustaría que esas pistas fueran al menos 5em de altura, aunque no tengamos suficiente contenido. Por ejemplo, esta segunda pista aquí, que acaba de conseguir una línea. Pero me gustaría, si consigo demasiado texto ahí dentro, me gustaría que se expandiera, y eso es exactamente lo que hace la función minmax. Entonces, lo que está pasando aquí es, cuando usas minmax para el dimensionamiento de tu pista, puedes pasar en un min, un mínimo que en nuestro caso es 5em, y luego usar una coma, y luego pasas en el máximo. Entonces, para el máximo aquí, estoy usando auto, y auto significa realmente el tamaño del contenido en este contexto. Entonces, eso significa que si tenemos más texto ahí dentro, la pista crecerá. Si no hay suficiente texto, sería 5em. Lo que esto también destaca es que, nuestra red interna no tiene ninguna relación con la siguiente rejilla interna. Lo que puedes hacer en este momento dices: “Bueno me gustaría que todo se alineara con el artículo más alto, porque todas las rejillas anidadas son independientes de la cuadrícula exterior”. Si haces pequeña la cantidad de espacio en una pista, puedes ver que cómo ese título es en realidad cada vez más alto para hacer frente al texto de ajuste. Entonces, esta es una pequeña función que realmente sí refleja la forma en que están las cosas en la web. El hecho de que si tienes algo que tiene cierta cantidad de contenido, podría haber más contenido a veces. Entonces, para envolver esta sección, ahora hemos diseñado las cajas internas en la sección superior destacada, y lo hemos hecho anidando una cuadrícula dentro de la cuadrícula que ya teníamos. Al posicionar los ítems, empieza a utilizar el posicionamiento basado en línea, que hablaremos un poco más después para posicionar los ítems y tirar de la leyenda sobre la imagen que ya hemos colocado. Entonces, en un video, algunas propiedades CSS, has aprendido mucho sobre la grilla CSS, y las diferentes cosas que puedes hacer con ella. 6. Combinar la ubicación manual y automática: Puedes seguir siguiendo el ejemplo en el que estás trabajando, o puedes usar la URL en pantalla para recoger exactamente donde estoy ahora. En esta lección, vamos a empezar a mirar un poco más sobre cuándo podría querer usar la colocación automática y la cuadrícula cuando tal vez desee posicionar sus elementos y cómo puede mezclar los dos métodos de diseño. Se puede ver la colocación de auto ocurriendo en nuestro pestillo ya. Entonces, cuando definimos nuestras cuadrículas en los elementos destacados, no hemos posicionado cada uno de esos ítems, simplemente colocan uno en cada celda de la cuadrícula. Empezamos a hacer alguna colocación cuando dispusimos los internos de esos artículos. Porque en la cuadrícula anidada, definimos una cuadrícula, y luego usamos el posicionamiento basado en línea para colocar elementos en esa cuadrícula fin de que podamos tirar de ese título sobre la imagen de abajo. Entonces, miramos cómo podríamos querer usar realmente el layout posicionado que estás colocando elementos en la cuadrícula cuando colocamos nuestro contenido aquí. Entonces, se puede ver por el momento que el contenido se empuja hacia arriba justo contra el borde de la ventana gráfica. Se está corriendo directo a los bordes y eso probablemente no sea algo que te gustaría. Entonces, tal vez te gustaría cambiar este listado de pistas. Entonces, ve a las columnas de plantilla y agrega un poco de un hueco a cada lado. Entonces, tal vez acabamos de tener una brecha de 10 píxeles, y se puede ver qué pasa. La colocación automática está tratando de meter todo nuestro contenido en esa pequeña pista, y está desbordada porque no encaja en una pista de 10 píxeles y se ve un poco desordenado. Eso obviamente no es algo que queramos. Entonces, vamos a tener que posicionar el contenido que no termina en esa pequeña pista. También voy a agregar algunas filas aquí. Porque una vez que comiences a colocar tus elementos, entonces es posible que realmente quieras empezar a agregar filas en lugar de dejar que se creen filas en la cuadrícula para que puedas colocar elementos en ellos. Entonces, voy a agregar una fila en la parte superior, y luego una fila automática debajo. Entonces, ahora hemos creado un poco más de una cuadrícula específica, y podemos empezar a colocar nuestros artículos sobre ella. Entonces, ahora hemos configurado nuestra grilla y la hemos hecho un poco más específica. Posicionemos el contenido en esa cuadrícula. El contenido está justo al final de nuestro HTML y está dentro de un artículo en la clase de post. Entonces, podemos apuntar post, y luego vamos a usar columna de cuadrícula, y queremos empezar después de la línea dos de columna. Entonces, eso evitará esa pequeña pista flaca que creamos. Sólo necesitábamos abarcar una pista, así que sólo podemos decir cuadrícula columna dos. En realidad lo voy a configurar para que abarque dos filas, recreadas para hilar pistas. Entonces, vamos a tenerlo abarcado desde la línea de la fila uno hasta la línea de la fila tres. Ahora, porque hemos posicionado eso por fila y columna, lo que pasó con la colocación automática es que, gran reposición del elemento que has colocado, y luego toma el siguiente ítem que encuentra, y las cosas están donde está la primera celda vacía? Bueno, la primera celda vacía en este caso está en esa pequeña pista flaca, donde no queremos que las cosas vayan, y por eso la barra lateral va luego y saltó a esa pista. Entonces, también necesitamos posicionar la barra lateral. Entonces, esto tiene una clase de lado uno. Vamos a un lado queremos ir después de gran columna línea tres. En realidad me gustaría que apareciera parte por el contenido, lo que significa que podemos ponerlo en una cuadrícula fila dos, que luego lo mueve hacia abajo por el contenido. Es este tipo de cosas que fue realmente difícil de hacer sin el diseño de cuadrícula. En realidad, crear un espacio en blanco por encima de los elementos fue muy, muy difícil, y así esto solo te muestra una de esas pequeñas cosas que puedes hacer con diseño de cuadrícula que solía ser muy difícil y ahora se puede usar de maneras más creativas. Porque tenemos nuestras cuatro unidades definiendo nuestras pistas y decimos que esta fila ahora crece y se encoge muy bien con el espacio disponible. Entonces, la sección superior de esta página, vamos a usar auto pace. Queremos tantos artículos como tengas que entrar y colocarse. No obstante, lo que nos gustaría es, hacer del primer elemento una gran característica, así que hazlo más grande y en realidad abran más celdas de la cuadrícula. Entonces, podemos hacer eso apuntando al primer elemento de esa lista. Entonces, ese es el primer hijo de esa lista. Entonces, ese sería el enjambre de los globos y dirigible rumbo. El primer selector hijo seleccionará basando el primer hijo del contenedor. Entonces, aquí estamos diciendo, quiero el primer elemento de lista dentro de destacados que se pondrá como nuestro primer elemento aquí, y ese es el elemento que queremos estirar sobre más celdas. Quiero que este ítem comience en la línea de la columna uno y en la línea de la columna tres, y comience en la línea de la fila uno y al final de la línea tres. Eso sólo colocaría eso, hizo de eso una imagen grande, y luego los otros artículos siguen usando auto colocación. Entonces, las rejillas primero colocarán todo nuestro artículo y harán que ocupe todas las celdas que necesita para ocupar, luego simplemente dejará caer los elementos junto a él. Este es un muy buen ejemplo de cómo se puede mezclar auto colocación de artículos con elementos de posicionamiento. Si tienes algo que quieres tener en un lugar específico de una página, puedes posicionarlo, y luego solo deja que la cuadrícula coloque todos los demás elementos por ti. Entonces, te puedes imaginar que si estás tratando de resaltar una imagen específica o una gran sección de contenido, esto es algo que puedes hacer para crear esos bloques de halo en la parte superior de una página, donde estás resaltando algo específico en el diseño haciéndolo abarcar la mayor parte de las pistas de la cuadrícula. Se puede ver cómo, siempre tenemos cuatro pistas en la parrilla en este punto. Entonces, si hacemos nuestras ventanas más pequeñas, sólo ocupa tanto espacio como tiene para esas dos pistas, y podemos hacerlas más grandes. Entonces, es naturalmente flexible a través de la rejilla. Si tenemos menos espacio o si tenemos más espacio, porque estamos usando esas unidades FR, el espacio se acaba de compartir en proporción. Entonces, una imagen grande siempre ocupa dos vías de la rejilla aunque esos camiones sean más pequeños o más grandes, haciéndola naturalmente flexible. Entonces, la muy pequeña cantidad de CSS, no hemos escrito una enorme cantidad de CSS. Tienes la disposición básica aquí para tu blog. Hemos combinado las calificaciones anidándolas, hemos utilizado el posicionamiento, y también hemos usado la colocación automática. Hemos aprendido sobre diferentes formas de dimensionar pistas usando las unidades FR y también mediante el uso de unidades lead, y cosas que el minmax mociona, sabes cómo crear algo que empieza en un tamaño fijo pero crece hasta contienen contenido. Lo que tenemos aquí realmente es tu diseño de escritorio para tu blog. Yo lo pondré. Es flexible, aún no es del todo receptivo. Y así, en la siguiente lección vamos a echar un vistazo a cómo tomar este diseño y hacerlo realmente bien en tamaños de pantalla muy pequeños. 7. Incorporar la adaptabilidad: Puedes seguir junto con el ejemplo en el que hemos estado trabajando. Si quieres empezar con el punto en el que estoy ahora, entonces usa la URL que está en pantalla. En la última lección, cubrimos la colocación manu versus auto placement, y mostramos cómo teníamos este diseño flexible, pero aún no era del todo receptivo. Entonces, en esta lección, vamos a ver cómo crear un layout responsive que nos ayude a crear una versión que funcionó muy, muy bien en pantallas pequeñas. Un diseño responsive responderá a cualquier dispositivo que estés usando. En la Web hoy, la gente está usando teléfonos diminutos con pantallas muy pequeñas, están usando tabletas, están usando computadoras de escritorio con pantallas enormes. Entonces, creamos un diseño responsive significa que funcionará igual bien en cada una de esas pantallas en diferentes diseños, por lo que podemos cambiar el diseño para aprovechar el tamaño de pantalla que tenemos. Te voy a mostrar cómo despegar la publicación flexible de blog, y convertirla en un diseño responsive con un diseño de pantalla pequeña. El diseño que hemos creado es flexible. Entonces, como tenemos menos espacio o más espacio, la distribución de espacios entre nuestras vías por el uso de la unidad FR. No obstante, una vez que llegamos a muy pequeño, se vuelve un poco difícil de leer. Realmente no querrías leer algo como esto en un teléfono móvil, no es ideal. Entonces, ahora vamos a ver cómo convertir esto en un diseño receptivo, para crear un diseño diferente para estos dispositivos de pantalla pequeña. Entonces, puedes hacer un par de cosas con el diseño de cuadrícula. Puedes redefinir tu cuadrícula, y puedes redefinir donde las cosas realmente se sientan en esa cuadrícula una vez que hayas hecho cambios en ella. Entonces, echemos un vistazo. Lo que voy a hacer es que voy a agregar una consulta de medios. Lo que digo aquí es que voy a usar un minwidth así que, cuando las cosas lleguen a un ancho mínimo, un 50 em, ahí es donde voy a añadir un punto de ruptura. Ahora, cuando estés agregando estos puntos de ruptura, no pienses demasiado en ciertos dispositivos, no pienses bien, ¿qué tan grande es un iPad? ¿ O qué tan grande es un teléfono? Preocúpate por cuando tu tipo de diseño se rompe, preocúpate por cuando las líneas se vuelven demasiado cortas o se vuelven demasiado largas, y ahí es realmente donde deberías estar agregando estos puntos de rotura. Entonces, no te preocupes demasiado por el tamaño de los dispositivos porque realmente hay tantos dispositivos diferentes. No vale demasiado la pena preocuparse por eso. Tan solo piensa en tu diseño, cuándo se vuelve demasiado estrecho o demasiado ancho. En este caso, voy a ir por 50 em, y aquí es donde porque estamos diciendo ancho mínimo, esto es lo que queremos en realidad un layout más amplio, un diseño de escritorio que es lo que ya hemos creado, queremos que eso patee en . Entonces, estamos lidiando con ese panel destacado en la parte superior. Lo que voy a hacer es que sólo voy a agarrar las columnas y filas y poner esas aquí abajo. Ahora, lo que esto significa es que ahora puedo redefinir la cuadrícula de arriba para nuestras pantallas más pequeñas. Lo que quiero hacer para pantallas pequeñas es que sólo voy a tener dos pistas de columna. Entonces, voy a mover dos pistas de columna, y voy a cambiar filas de plantilla de cuadrícula y voy a usar una propiedad diferente, una que no hemos visto antes, y esa es cuadrícula auto rows. Vamos a usar minmax aquí, y digamos, grid auto filas 250 pixels, auto. Ahora, lo que hace las filas automáticas de cuadrícula es cuando obtenemos filas en nuestra cuadrícula que se crean automáticamente para poner contenido en, las creará a este tamaño. Habrá un mínimo de 250 píxeles de altura y un máximo de auto. Ahora, nada ha cambiado todavía, pero vamos a ir más pequeños, y se puede ver el cambio de diseño. Una vez que lleguemos a ese 50 em, una vez que lleguemos por debajo de 50 em, vamos a nuestro diseño de pantalla más pequeño para este panel porque solo tenemos dos pistas, rejillas coloca nuestro artículo grande en la parte superior, y los artículos más pequeños abajo. Este es un diseño un poco más bonito para nuestros dispositivos más pequeños, y luego a medida que nos hacemos más grandes, llegamos a los 50 ems, y volvemos a encajar a nuestro diseño original para el panel destacado. Entonces, lo que estamos haciendo aquí a veces se llama inmóvil primer layout que básicamente configura lo que tienes para tu pantalla pequeña, y luego lo redefines para las pantallas más grandes. Entonces, tenemos dos columnas para una pantalla pequeña, y luego decimos cuando lleguemos a un ancho mínimo de 50 em, entonces vamos a tener cuatro columnas. Al volver a usar la propiedad de columnas de plantilla de cuadrícula, sobrescribamos la instrucción anterior una vez que obtenemos lo suficientemente ancho como para tener cuatro columnas, y así es como funciona CSS. Cosas que vienen más tarde en la hoja de estilo sobrescribirán cosas que vienen antes. Entonces, primero tienes tus cosas móviles, y luego lo sobrescribes con tu consulta inmediata y vas a un diseño de columna completo. Entonces, en este momento, estamos usando nuestro diseño de dos columnas y se puede ver eso porque nuestro gran elemento que abarca dos pistas está abarcando dos pistas en la parte superior y los otros ítems vienen abajo. Cuando llegamos a 50 em, puedes ver que saltan de nuevo a nuestro diseño de escritorio. Entonces, podemos hacer el mismo tipo de cosas con la parte inferior del diseño. A medida que vamos muy pequeños, terminamos con no mucho espacio para que la barra lateral se siente aquí, y todo se vuelve un poco estrecho. Entonces, podemos volver a hacer cambios a cómo funciona ese diseño. Entonces, una vez más, vamos a agregar nuestra consulta de medios. Voy a usar el mismo punto de ruptura. Esta vez vamos a hacer el mismo tipo de cosas con contenido. Voy a agarrar mis columnas y mis filas y ponerlas dentro de la consulta de medios, y luego podemos redefinir la cuadrícula de arriba. Entonces, lo que quiero hacer esencialmente es solo tener una gran columna central, y no necesitamos preocuparnos por las filas aquí, solo podemos agregar eso en. Entonces, lo que también necesito hacer es tomar el posicionamiento y pop que arriba dentro de las consultas de medios también para que tenga sentido una vez que tengamos un diseño más amplio con las pistas que queremos. Entonces, ahora se puede ver que las pantallas pequeñas, esto ha vuelto a tratar de meter nuestro contenido dentro de esa pista flaca. Entonces, lo que tenemos que hacer es hacer que tanto nuestro hueso lateral como el contenido comiencen después de esa pista flaca. Entonces, terminan con una clase de post y la del lado uno que representa el cuerpo principal real de nuestro artículo y la barra lateral, ahora ambos comienzan después de la línea de columna de cuadrícula dos. Entonces, esa es la línea después de preguntar cualquier barra lateral ahí. Se puede ver si nos desplazamos hacia abajo, esta es la barra lateral. Siempre puedes ponerle un color de fondo a eso o hacer algo para diferenciarlo si lo quisieras. Esto es realmente lo que tiendes a hacer con los diseños móviles, tienes que apilar las cosas en un orden útil, y ahí es cuando la cuadrícula lo hace bastante fácil. Entonces si vamos más ancho, una vez que golpeamos ese 50 em, ve la barra lateral aparece en su lugar porque una vez más, hemos sobrescrito las instrucciones para estar justo después de la línea de columna de cuadrícula dos y agregarlo en una fila, y luego la línea de columna de cuadrícula tres para la barra lateral. Entonces, lo estamos configurando para móvil y luego abajo, dentro de las consultas medias, lo configuramos para escritorio. Entonces, ahora hemos creado un diseño de respuesta simple. Entonces, puedes ver aquí cómo, medida que vamos más pequeños, ahora obtenemos un bonito diseño móvil, y podemos desplazarnos hacia abajo y eso es todo perfectamente legible. Entonces a medida que nos estiramos, volvemos a nuestra vista de escritorio. El asunto es que con grid realmente necesitas muy poco CSS para lograr esto, y acabamos de agregar en un punto de ruptura. Ahora, en un diseño complejo, es posible que desee agregar varios puntos de ruptura. Es posible que desee crear un layout que aproveche pantallas muy grandes, y agregarle otro punto de ruptura o tal vez desee crear digamos estos teléfonos muy lineales, muy diminutos. Porque no necesitas mucho CSS para hacer eso y no es muy difícil de hacer, es mucho más fácil realmente adaptar tu diseño a todos los diferentes tipos de dispositivos que hay por ahí. Entonces, casi hemos terminado con el uso de cuadrícula para diseñar nuestra página, y se puede ver cómo a partir de unas pocas líneas de código, hemos tenido que ir de algo que acabamos de tener todo nuestro contenido trazado una cosa debajo de la otra a un layout que podrías poner en línea para una entrada de blog, y también hemos hecho que responda. Entonces, tienes un diseño que funciona para diferentes dispositivos. Entonces, seguiremos adelante en la siguiente lección solo para pensar un poco sobre cómo funciona la cuadrícula junto a otros métodos de diseño. 8. Combinar diseños: Queremos la parte final de nuestro diseño y puedes seguir junto con la capa que has estado construyendo hasta ahora, o puedes usar la URL en pantalla ahora para recoger exactamente donde estoy. En esta lección final, voy a hablar de un lugar donde quizás no quieras usar Grid en absoluto y cómo podemos usar Flexbox para darle estilo a la navegación. Mi navegación, me gustaría disponer en una fila, lo que lo convierte en un buen candidato para un diseño de Flexbox. Entonces, echemos un vistazo. Entonces, en el HTML, podemos ver la navegación en una lista ordenada, ya que tenemos Artículos, Eventos, Recursos y Contáctame. Agregando el CSS. Esa es la lista desordenada aquí, la que está dentro de cabecera. Una vez agai, n he quitado el margen y el relleno y el estilo de lista que obtendrías por defecto en una lista. Ahora, para convertir esto en un diseño Flex, todo lo que necesito hacer, es decir, “display: flex”. inmediato, todos saltan a una línea y eso se debe a que la pantalla predeterminada para Flexbox, valor de cuadro de lista es tener dirección flex de filas, por lo que las cosas todas alineadas en una fila. Eso es realmente todo lo que necesitamos hacer. comparación, si hicieras eso en un diseño de Grid, tendrías que empezar a tomar muchas más decisiones sobre el diseño. Entonces, diríamos “mostrar: Grid” entonces, bueno no pasaría nada, y tendríamos que pensar en configurar nuestras columnas. Por lo que quizá, podríamos tener cuatro columnas. Ahora bien, esto podría funcionar bien si supieras que siempre tienes cuatro elementos en tu navegación. Querías que estuvieran espaciados uniformemente o tal vez que pudieras tener una navegación multinivel. Tienes dos filas de contenido. Bueno en ese caso, usar Grid sería una buena opción. Pero en nuestro caso, sólo queremos que esos artículos se alineen uno al lado del otro. Entonces, es mucho más sencillo solo decir, “display: flex” y eso me da el layout que realmente quiero. Entonces, elegirías Flexbox si solo quieres colocar las cosas en una dimensión, así que eso es como una fila o como una columna. En este caso, los queríamos como fila, y así Flexbox es una buena opción. Con nuestra entrada de blog artículo destacado, esto es bidimensional porque queremos poner las cosas en filas y en columnas. Queremos que se alineen en sus columnas así como en sus filas. Ese es un diseño bidimensional. Entonces, por eso he elegido a Grid. Entonces, esa es más o menos la razón por la que elegirías una u otra. Con Grid, se llega a definir toda la Grid en el padre y luego los artículos simplemente encajan en ella, lo cual es una forma bastante agradable de trabajar. Entonces, esa es realmente otra forma de elegir Grid, es cuando quieres hacer ese tipo de configuración grande, formar los elementos principales, y luego solo dejar que las cosas caigan con la colocación automática. Flexbox es mucho solo sobre tomar un montón de cosas y difundirlas. Entonces, eso es realmente todos los pasos que necesitas para crear una página de listado de blogs. No tengas miedo de usar esto como punto de partida y ponerte creativo y hacer cambios y ver cómo se comporta Grid. El mejor modo de aprender CSS es jugar con CSS, absolutamente. Recuerda, si has hecho muchos cambios y quieres exportarlo y usarlo en tu propio sitio, en tu vista en CodePen, tienes este pequeño botón de exportación. Si haces clic en eso, puedes exportar un zip y eso te dará todo. Te dará el CSS y el HTML. Entonces, puedes usarlo en otro lugar o abrirlo en un editor de código en tu escritorio y jugar ahí con él. Entonces, espero que esto haya sido realmente útil para aprender a crear una entrada de blog. Has aprendido mucho sobre CSS Grid en el camino. 9. Reflexiones finales: Entonces, en esta clase, has pasado de no saber nada de cuadrícula CSS a poder usar varias de las propiedades de la cuadrícula CSS para diseñar página web natural. Podrías usar estas cosas en una página Web real en producción ahora mismo. Has aprendido a definir una cuadrícula, a configurar pistas de columna y carretera y usar la unidad FO y cosas como minmax, para que puedas especificar un tamaño mínimo y un tamaño máximo. Hemos mirado las rejillas de anidación y también crear un diseño de respuesta simple. También hemos visto por qué es posible que desee usar grid sobre otros métodos de diseño. Entonces, realmente estás listo para empezar a usar estas cosas en el mundo real. Me encantaría ver tus páginas de listado de blog o cualquier otra cosa que hagas es el saltarte de este proyecto. Entonces, por favor suba esos a la galería de proyectos, para que todos podamos echar un vistazo. Espero que disfrutemos de esta clase. Hay tantas direcciones diferentes que puedes tomar estas cosas ya sea de una manera creativa, o simplemente en una racionalización la forma en que creas cosas que ya tienes que hacer. De verdad espero con ansias ver qué haces con él. 10. Explora más clases en Skillshare: