🎯 CSS GRID en 10 minutos (DESDE CERO).
Summary
TLDREn 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
😀 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.
📚 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.
🎓 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.
Mindmap
Keywords
💡CSS Grid
💡Grid Container
💡Grid Items
💡display: grid
💡fr
💡grid-template-columns
💡grid-template-rows
💡repeat()
💡grid-column
💡grid-row
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
Browse More Related Video
5.0 / 5 (0 votes)