🎯 CSS GRID en 10 minutos (DESDE CERO).

Summary

En este video de 10 minutos, se presenta una guía fácil y sencilla para aprender CSS Grid. Se muestra cómo crear diseños bidimensionales utilizando filas y columnas, lo que permite una mayor flexibilidad en la creación de layouts. El script explica los conceptos básicos como grid container, grid items, y cómo utilizar las propiedades grid-template-columns y grid-template-rows para definir el diseño. También se incluyen ejemplos prácticos y un vistazo a las herramientas de visualización de grid en navegadores como Chrome. El patrocinador del video, Hostinger, ofrece alojamiento web con descuentos exclusivos. Finalmente, se promociona un curso avanzado sobre CSS Grid y Flexbox para dominar estas herramientas de diseño.

Takeaways

• 📐 CSS Grid es una herramienta que facilita la creación de diseños bidimensionales con filas y columnas.
• 🎨 Un contenedor con la clase 'container' se convierte en el grid container, y sus hijos directos se denominan grid items.
• 🌀 Utiliza la propiedad `display: grid` para activar CSS Grid en un contenedor.
• 📏 La propiedad `grid-template-columns` permite definir columnas y el uso de `fr` para fracciones de espacio.
• 🔄 La función `repeat()` simplifica la creación de múltiples columnas o filas con el mismo tamaño.
• 📏 `grid-template-rows` funciona de manera similar a `grid-template-columns` pero para filas.
• 👀 Las herramientas de desarrollador de Chrome permiten visualizar y trabajar con la cuadrícula de la página web.
• 📍 Los elementos grid se pueden posicionar usando `grid-column` y `grid-row` con números de línea como coordenadas.
• ➡️ Los elementos grid pueden abarcar varias líneas de columnas y filas, y se pueden superponer entre sí.
• 🖼️ En el ejemplo, se utiliza CSS Grid para crear una sección 'about' con un diseño que incluye una imagen, un gradiente y un artículo.
• 🔄 El uso de `grid-column` y `grid-row` en los elementos hijos permite una posición precisa dentro del grid container.
• 📚 El curso mencionado en el script ofrece una guía completa para aprender CSS Grid y Flexbox, con contenido teórico y práctico.

Q & A

¿Qué es CSS Grid y cómo nos ayuda a crear layouts?

CSS Grid es una herramienta de diseño web que permite crear layouts de dos dimensiones (filas y columnas) de una manera fácil y sencilla, facilitando la creación de diseños bidimensionales.

¿Qué es un 'grid container' y cómo se activa en CSS?

Un 'grid container' es un elemento que actúa como contenedor para los elementos hijos que se llaman 'grid items'. Para activarlo en CSS, se utiliza la propiedad 'display' con el valor 'grid'.

¿Cómo se definen las columnas en CSS Grid?

Las columnas se definen utilizando la propiedad 'grid-template-columns'. Se puede utilizar una unidad especial llamada 'fr' que representa fracciones del espacio del contenedor.

¿Cómo se pueden crear múltiples columnas de una vez en CSS Grid?

Se puede utilizar la función 'repeat' que toma dos valores: el número de columnas a crear y la unidad de medida que las definirá, como por ejemplo '1fr' para una fracción.

¿Qué es Hostinger y cómo se relaciona con el contenido del script?

Hostinger es un patrocinador del canal y ofrece alojamiento web para proyectos. En el script, se menciona para promocionar sus servicios y beneficios como dominio gratis, certificado SSL y descuentos.

¿Cómo se visualiza una grid en el navegador Chrome?

En Chrome, se puede visualizar una grid a través de la herramienta de desarrollo que permite mostrar 'grid overlays'. Se selecciona la opción de 'grid' y se establece un color para visualizar las líneas de la grilla.

¿Qué son las 'líneas' en CSS Grid y cómo se utilizan para posicionar elementos?

Las 'líneas' son las líneas horizontales y verticales que se crean automáticamente en CSS Grid según el número de columnas y filas. Se utilizan para posicionar los elementos o 'grid items' mediante sus números de línea como coordenadas.

¿Cómo se posicionan los elementos dentro de una grid utilizando CSS Grid?

Los elementos se posicionan utilizando las propiedades 'grid-column' y 'grid-row', donde se especifican las líneas inicial y final en las que se ubicará el elemento tanto vertical como horizontalmente.

¿Cómo se puede personalizar el diseño de un layout utilizando CSS Grid?

Se puede personalizar el diseño utilizando 'grid-template-columns' y 'grid-template-rows' para definir el tamaño de las columnas y filas, y luego posicionando los elementos hijos dentro de estas utilizando 'grid-column' y 'grid-row'.

¿Qué es el curso mencionado en el script y cómo puede ayudar a dominar CSS Grid?

El curso mencionado es un curso dedicado a Flexbox y Grid, que incluye contenido teórico y práctico, con más de 9 horas de video y más de 10 prácticas reales. Ayuda a dominar CSS Grid desde cero a avanzado y a crear proyectos utilizando estas herramientas.

¿Cómo se puede obtener el mejor descuento para el curso mencionado en el script?

Para obtener el mejor descuento para el curso, se puede visitar el sitio web alexedizank.com/masterFlex, donde se proporciona un descuento especial para los visitantes.