🎯 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.

Outlines

00:00

😀 Aprendiendo CSS Grid

El primer párrafo introduce el tema de aprender CSS Grid en 10 minutos. Se menciona una estructura básica de un documento HTML y se describe cómo CSS Grid ayuda a crear diseños de manera fácil y sencilla, utilizando dos dimensiones: filas horizontales y columnas verticales. Se destaca que para comenzar con Grid, se necesita un contenedor (grid container) con hijos directos (grid items). Se menciona un archivo CSS con estilos básicos y se procede a activar Grid en el contenedor utilizando la propiedad 'display: grid'. Luego, se explica cómo utilizar la propiedad 'grid-template-columns' para definir columnas y el uso de 'fr' para dividir el espacio en fracciones. También se menciona la visualización de la cuadrícula en navegadores como Chrome y cómo posicionar elementos utilizando líneas de columnas y filas.

05:00

📚 Posicionamiento en CSS Grid

El segundo párrafo se enfoca en el posicionamiento de elementos dentro de una cuadrícula CSS. Se describe cómo utilizar las propiedades 'grid-column' y 'grid-row' para definir los límites de los elementos en líneas específicas. Se da un ejemplo práctico de cómo posicionar cuatro elementos en una cuadrícula utilizando líneas de columnas y filas. Además, se presenta un ejemplo práctico de cómo aplicar CSS Grid a una sección de un sitio web, incluyendo estilos para el body, un contenedor, una imagen, un gradiente y un artículo. Se muestra cómo utilizar 'grid-template-columns' y 'grid-template-rows' para definir el diseño de la cuadrícula y cómo posicionar cada elemento utilizando las propiedades de 'grid-column' y 'grid-row'. Se resalta la capacidad de superposición de elementos y se ofrece un vistazo al código para ilustrar cómo se pueden crear diseños complejos con pocas líneas de código.

10:05

🎓 Curso de CSS Grid y Flexbox

El tercer párrafo promueve un curso que enseña a dominar CSS Grid y Flexbox desde cero hasta un nivel avanzado. El curso incluye la creación de proyectos prácticos para aplicar los conceptos aprendidos y cubre tanto la teoría como la práctica. Se menciona que el curso está dedicado exclusivamente a Flexbox y Grid, tiene más de 9 horas de contenido y más de 10 prácticas reales. Se ofrece un enlace a alexedizank.com/masterFlex para obtener el mejor descuento disponible al inscribirse en el curso.

Keywords

💡CSS Grid

CSS Grid es una tecnología de diseño web que permite crear layouts bidimensionales utilizando filas y columnas. Relacionado con el tema del video, CSS Grid facilita la estructuración de elementos en una página web, como se muestra en la práctica de dividir un contenedor en seis columnas y tres filas.

💡Grid Container

El Grid Container es el elemento contenedor que define una cuadrícula en CSS Grid. Es esencial para aplicar las propiedades de Grid a sus elementos hijos, llamados Grid Items. En el video, el contenedor está representado por un <div> con la clase 'container'.

💡Grid Items

Los Grid Items son los elementos directos dentro del Grid Container que se posicionan utilizando las propiedades de CSS Grid. Estos elementos pueden ser organizados en filas y columnas para crear layouts complejos. En el video, los Grid Items se posicionan usando propiedades como grid-column y grid-row.

💡display: grid

La propiedad 'display: grid' activa el modo de cuadrícula en un contenedor, permitiendo el uso de las funcionalidades de CSS Grid. Esta propiedad es fundamental para transformar cualquier contenedor en un Grid Container, como se hace en el video con el contenedor de clase 'container'.

💡fr

La unidad 'fr' en CSS Grid representa una fracción del espacio disponible en el contenedor. Es usada para distribuir el espacio de manera proporcional entre columnas o filas. En el video, se muestra cómo 'fr' facilita la creación de columnas de tamaño igual al definir '3fr' para dividir el contenedor en tres columnas iguales.

💡grid-template-columns

La propiedad 'grid-template-columns' define la estructura de las columnas en un Grid Container. Se utiliza para especificar el número y tamaño de las columnas. En el video, se utiliza para crear seis columnas de una fracción cada una, optimizando la distribución del espacio horizontal.

💡grid-template-rows

La propiedad 'grid-template-rows' define la estructura de las filas en un Grid Container. Es similar a 'grid-template-columns' pero se aplica verticalmente. En el video, se usa para crear tres filas de diferentes tamaños: una de 100 píxeles, otra de 10em y una última de una fracción.

💡repeat()

La función 'repeat()' en CSS Grid simplifica la creación de patrones repetitivos de filas o columnas. Permite definir el número de repeticiones y el tamaño de cada repetición. En el video, 'repeat(6, 1fr)' se utiliza para crear seis columnas iguales, reduciendo el código necesario.

💡grid-column

La propiedad 'grid-column' especifica la posición y el alcance de un Grid Item a lo largo de las líneas de columna. Se usan dos valores separados por una diagonal para definir la línea de inicio y fin. En el video, se usa 'grid-column: 1 / 5' para que un elemento abarque desde la primera hasta la cuarta columna.

💡grid-row

La propiedad 'grid-row' especifica la posición y el alcance de un Grid Item a lo largo de las líneas de fila, similar a 'grid-column'. Define la línea de inicio y fin para las filas. En el video, 'grid-row: 1 / 2' posiciona un elemento para que ocupe solo la primera fila.

Highlights

Aprender CSS Grid en 10 minutos para crear layouts fácilmente.

CSS Grid maneja dos dimensiones: filas horizontales y columnas verticales.

Un contenedor con clase 'container' es necesario para iniciar con Grid.

El contenedor se conoce como 'grid container' y los hijos directos como 'grid items'.

Activar Grid en el contenedor usando la propiedad 'display: grid'.

Utilizar 'grid-template-columns' para definir columnas.

La unidad 'fr' representa fracciones de espacio en el contenedor.

La función 'repeat' permite crear múltiples columnas o filas.

Hostinger promoción: alojar proyectos web a buenos precios.

Visualización de la Grid en Chrome con la herramienta 'grid overlays'.

Las 'líneas' en Grid se crean automáticamente y ayudan a posicionar elementos.

Posicionar elementos usando 'grid-column' y 'grid-row' con coordenadas de líneas.

Ejemplo práctico de aplicación de CSS Grid en una sección 'about'.

Uso de 'grid-template-columns' y 'grid-template-rows' para definir estructura de la grid.

Sobreponer elementos en Grid gracias a la posición por líneas.

Curso de CSS Grid y Flexbox para aprender desde cero a avanzado.

El poder de CSS Grid para crear layouts complejos con poco código.

Transcripts

aprendamos css grid en 10 minutos Tengo

un documento html con la estructura

básica de un documento html y quiero

comentarte que css grid nos ayuda a

crear layouts de una manera fácil y

sencilla se le llama grid porque maneja

dos dimensiones las filas que son

horizontales de izquierda a derecha y

las columnas que son verticales de

arriba hacia abajo esto nos permite

crear layouts bidimensionales de una

manera muy sencilla para comenzar con

grid necesitaremos un contenedor que en

este caso está representado por un dip

con la clase container y este contenedor

a su vez tendrá hijos directos que son

sus hijos inmediatos y están

representados por estos cuatro elementos

al contenedor se le conoce como grid

container y a los elementos o hijos

directos se les conoce como grid ítems

yo ya tengo el asado un archivo

css con ciertos estilos los cuales son

estos como puedes ver es solamente

css puro sin utilizar Green una vez

tenemos la estructura del html vamos a

pasar al css en específico al contenedor

con la clase container y vamos a

activarle grid usando la propiedad

display con el valor grid ya estamos

utilizando grid como te comenté podemos

usar filas y columnas para crear

columnas utilizaremos la propiedad

greenplate colors esta propiedad nos

ayuda a definir columnas esto es en el

contenedor Y tenemos un valor especial

que es FR que nos ayuda a representar

por fracciones el espacio de nuestro

contenedor Por ejemplo si yo pongo tres

unidades FR estoy dividiendo el espacio

del un contenedor en columnas en tres

espacios o en tres columnas yo voy a

crear seis columnas de una fracción

Entonces ahora dividir el espacio del

contenedor en seis columnas pero yo

puedo acortar este código con la función

repit que lleva dos valores el primer

valor indica Cuántas columnas voy a

crear en mi caso 6 el segundo valor será

la unidad de medida que medirá esa

columna o las seis columnas en mi caso

una fracción y es exactamente lo mismo

igual voy a poder crear filas con Green

Plate Rose y es la misma teoría que

crear columnas puedo usar la función

repeat y también la unidad FR en mi caso

voy a crear tres filas la primera de 100

píxeles la segunda de 10m y la última de

una fracción ahora Hablemos del

patrocinador del Canal el cual es

hostinger en hostinger

vamos a alojar nuestros proyectos web

con la mejor calidad al mejor precio

solamente ingresa a hostinger.com

diagonal alexeg para obtener un super

descuento y vamos a elegir cualquier

plan en mi caso el plan Premium que me

da muchos beneficios por ejemplo dominio

gratis certificado ssl hasta 100

proyectos y muchos más beneficios y

vamos a contratarlo por 48 meses

bajaremos un poco y nos pedirá un cupón

yo voy a poner Alex cg en mayúsculas

y ahora tenemos un ahorro del

64%, por un plan de cuatro años vamos a

pagar 120 dólares qué esperas para tener

tus proyectos en internet y ya tengo una

grid con columnas y filas pero

actualmente no logro visualizar la grid

para eso voy a dar clic derecho en el

navegador y voy a inspeccionar Y en este

caso Chrome tiene una herramienta para

visualizar la grid voy a pasar a la

parte de layout y aquí en grid overlays

voy a seleccionar este check y voy a

poner un color negro voy a minimizar el

inspector y aquí puedo visualizar la

grid tengo 6 columnas y tres filas y

podemos darnos cuenta que tenemos aquí

un número estos números son líneas los

tenemos en columnas y también en filas

estas líneas se crean automáticamente

dependiendo del número de columnas y de

filas de nuestra gracias a navegadores

como Chrome podemos visualizar las

líneas y esto nos ayuda a crear layouts

Y esto es lo final de grid es que

nosotros podemos posicionar a los

elementos o a los grit items a través de

la grid por el número de líneas como si

fueran coordenadas para eso voy a pasar

a los elementos fijo que si vemos cada

elemento hijo o grid item tiene una

clase individual y para posicionar en

líneas de columnas que son verticalmente

es decir estas líneas las que van del 1

al 7 voy a pasar al elemento y voy a

escribir la propiedad grid colum como

primer valor irá la línea inicial donde

empezará en columnas y como segundo

valor la línea final donde finalizará en

columnas estos dos valores irán

divididos con una diagonal por ejemplo

al primer elemento quiero posicionarlo

en la línea 1 de columnas hasta las 5

Entonces el primer valor es inicial y el

segundo la final dividido por diagonales

en el segundo elemento quiero

posicionarlo desde la primera línea

hasta la quinta en el tercer elemento

quiero posicionarlo desde la primera

hasta la séptima que es la última y en

el cuarto elemento quiero posicionarlo

desde la quinta hasta la séptima y ahora

he cambiado el posicionamiento de los

elementos por líneas de columnas ahora

para posicionarlos por líneas de fila

usaré la propiedad grid Row como primer

valor irá la línea inicial y como

segundo la línea final ahora en filas

para el primer elemento quiero que la

línea inicial sea del 1 y la final al 2

entonces pondré 1 y 2 Esta es su

posición original para el segundo

elemento yo quiero que empiece desde la

segunda y termine en la tercera Entonces

igual es su posición original el tercer

elemento quiero que empiece desde la

tercera a la cuarta y esto es su

posición original Por último el cuarto

elemento quiero que empiece en la

primera línea y termine en la tercera

y esto hará que ocupe dos filas y ahora

sí hemos creado una grid y posicionado a

los elementos en base a esta grip

Imagine el potencial de esto en tus

proyectos ahora haremos una práctica más

real para eso tengo una sección con la

clase about un dip con la clase about

gradient una imagen con la clase about y

mg un artículo con la clase about

article que contiene un h1 con la clase

about title y un párrafo con la clase

about para grave en los estilos al Body

le dio una fuente Arial y un varón color

tomate al contenedor que es about y este

contenedor será el grid container le dio

un ancho y un alto además de un margen a

la imagen le di dimensiones y un objeto

fit cover para que no se pierda la

calidad de la imagen al gradiente le dio

un gradiente y al contenedor los textos

que es el artículo le di ciertos estilos

para que se viera de una mejor manera le

dio una fuente más grande además de un

margin para el párrafo y se vería de

esta manera ahora vamos a darle estilos

con css grid para eso voy a pasar al

contenedor con la clase about y voy a

dar un display grid para activar los

superpoderes de grid un grid template

colums para crear columnas y Quiero

crear seis columnas y a su vez Quiero

crear seis filas voy a pasar a Chrome y

ahora tengo esto voy a inspeccionar y en

layout voy a mostrar la grid de un color

negro y se vería actualmente así voy a

pasar ahora a la imagen que si vemos la

imagen El gradiente y el artículo son

hijos directos de grid por lo que yo

puedo usar la propiedad grid color para

posicionarlo en columnas Quiero que en

columnas vaya de la línea 1

5 y en filas igual de la línea 1 a las 5

si paso a Chrome se vería ahora de esta

manera y ahora voy a pasar al artículo

que es otro grid item voy a decirle que

se posicione en columnas desde la

columna 4 hasta la 9 hablando de líneas

y en líneas de filas que se posicione

desde la 3 hasta la 6 y se vería así

como vemos estamos apreciando de una

mejor manera la grid y podemos ver que

se pueden sobreponer elementos a otros

elementos esto Gracias a posicionar por

líneas por último al gradiente voy a

decirle que se posicione en columnas

desde la línea 2 hasta las 6 y en filas

desde la línea 2 hasta las 7 y con esto

hemos creado este layout desde cero con

css este es el poder de css Solamente

voy a quitarle el background al y voy a

ponerle un background un poco más claro

y ahora se vería de esta manera voy a

mostrarte el código para que veas que

con pocas líneas podemos hacer layouts

complejos con css grid y con un html muy

sencillo y css grid es mucho más de lo

que vimos en este vídeo si quieres

dominarlo desde cero a avanzado tengo un

curso donde crearemos proyectos como

este Para que pongas en práctica todo lo

aprendido sobre css grid y verás porque

es el módulo más poderoso de css para

crear layouts Además de que veremos la

teoría y la práctica y no solamente

sobre grid sino que también sobre

flexbox y aprenderás a usarlos y

sacarles el máximo provecho este curso

únicamente dedicado a flexbox y grid

cuenta con más de 9 de contenido y más

de 10 prácticas reales y a un súper

precio si quieres Ingresar a este curso

ve a

alexedizank.com/master Flex

y obtendrás el mejor descuento

disponible