Curso de CSS Grid Layout

Clases del Curso de CSS Grid Layout

Instruido por:
Estefany Aguilar
Estefany Aguilar
Básico
4 horas de contenido
Ver la ruta de aprendizaje
Curso de CSS Grid Layout

Curso de CSS Grid Layout

Progreso del curso:0/28contenidos(0%)

Contenido del Curso
Tutoriales de estudiantes
Preguntas de estudiantes

Progreso del curso:0/28contenidos(0%)

Lleva tus conocimientos de CSS a otro nivel

Material Thumbnail

Tips para llevar tu conocimiento de CSS a otro nivel + Quices

07:41 min

¿De dónde venimos y en dónde estamos?

Material Thumbnail

¿Cómo fue pensado CSS cuando se creó?

07:15 min

Material Thumbnail

Limitaciones de CSS y el problema de los elementos flotantes

07:51 min

Material Thumbnail

Herramientas que nos han facilitado el camino

06:13 min

¿Cómo se llegó al concepto de CSS Grid?

Material Thumbnail

¿CSS Grid es una idea nueva? La evolución de la especificación

08:09 min

Material Thumbnail

¿Qué significa Grid para CSS?

03:38 min

Control de alineamiento

Material Thumbnail

Técnicas de alineamiento antes de CSS Grid: margin y line-height

12:45 min

Material Thumbnail

Técnicas de alineamiento antes de CSS Grid: table-cell y positions

15:19 min

Material Thumbnail

Técnicas de alineamiento de CSS Grid: pros y contras

04:02 min

Material Thumbnail

Modos de escritura y ejes de alineamiento + Reto

09:07 min

Material Thumbnail

Propiedades físicas y lógicas en CSS + Quiz

09:26 min

Material Thumbnail

Técnicas de alineamiento con Flexbox

06:54 min

Material Thumbnail

Dibujemos con CSS + Reto

13:51 min

Conceptos generales para comenzar a trabajar con CSS Grid

Material Thumbnail

Grid y las relaciones padre e hijos inmediatos + Quíz

05:47 min

Material Thumbnail

Lines, tracks, cell, area, gutters, grid axis, grid row, grid column + Reto

09:07 min

Material Thumbnail

¡Iniciemos nuestro proyecto! Fase de creatividad e identificación de elementos

09:30 min

Propiedades y valores para el elemento padre

Material Thumbnail

Creando nuestro contenedor: ¿display: grid o display: inline-grid?

08:35 min

Material Thumbnail

Creando filas, columnas y espaciado + Reto

06:00 min

Material Thumbnail

Alineamiento en el elemento contenedor + Quiz

08:36 min

Material Thumbnail

Generación automática de tracks + Quíz

07:29 min

Material Thumbnail

Funciones: repeat(), minmax() y fit-content() + Quíz

08:42 min

Propiedades y valores para los elementos hijos

Material Thumbnail

¡Manos al código! Fase de construcción de la grid principal de nuestro proyecto

07:03 min

Material Thumbnail

Ubicación + Reto

07:36 min

Material Thumbnail

Alineamiento en los elementos hijos + Quiz

05:22 min

Material Thumbnail

¡Manos al código! Fase de ubicación y alineamiento

06:06 min

Material Thumbnail

Continuando con la fase de ubicación y alineamiento

09:54 min

Lo que podemos lograr adicionalmente con CSS Grid

Responsive y CSS Grid

08:13 min

Continúa con el Curso de Diseño Web con CSS Grid y Flexbox

00:29 min

nuevosmás votadossin responder
Gabriel dev
Gabriel dev
Estudiante

con metodología mobile first, tambien puedo trabajar con grid? Tendria que testear cuantas columnas en mobile, en tablet y desktop

3
Juan David González Rodríguez
Juan David González Rodríguez
Estudiante

fit-content() ocupa todo el tamaño que le indiquemos en los parentesis ? o como lo podemos usar en la practica … no lo entendi muy bien 😄

1
Oliver Manuel Delgado
Oliver Manuel Delgado
Estudiante

En donde puedo aprender a realizar el diseño?.
Me refiero a ese donde están la temática, imágenes, etc.

1
Camilo Torres camayo
Camilo Torres camayo
Estudiante

Este es una pequeña muestra de como me esta quedando el proyecto, las Grid no se si estarán bien
Recibo criticas constructivas
grid.png

7
Jose Montoya
Jose Montoya
Estudiante

Dichos comportamientos de margin de compartan asíi en grid pero no así en flex (algunos casos) ni block… pero aún no me queda claro porque… ¿alguien puede ayudarme?

0
Asbel Jose Herrera Morales
Asbel Jose Herrera Morales
Estudiante

Hay algo que no entiendo. se supone que cuando colocamos dos valores en margin (margin: 5px 10px) eso significa que hay un margen superior e inferios de 5px, e izquierdo y derecho de 10px. entonces el margen del elemento 6 (que es margin 120px auto) tiene un margen inferior de 120px que no afecta al elemento7, es decir no lo mueve hacia abajo? esto sucede acaso porque cada elemento es hijo de un contenedor diferente?

1
Juan David González Rodríguez
Juan David González Rodríguez
Estudiante

Sera que así esta bien la divisiones que hice de las grillas ?
Desktop1Capgrid.png

2
Eliezer Hernandez
Eliezer Hernandez
Estudiante

¿Cual es la diferencia entre area y track?
Sino mal entiendo la clase, grid track son una serie de elementos que pertenecen a la misma fila o columna (no necesariamente no todos las celdas que la conforman), mientras un área esta constituida por un conjunto de elementos que no necesariamente deben pertenecer a una misma fila o columna.
¿Me equivoco?
He leído sobre la definición de track. Algunos expresan se trata de todas las celdas que constituyen una fila o columna, fíjese que dije “todas”, otras definiciones se acercan mas al espacio que existe entre líneas adyacentes de la cuadricula, como si track fuera un termino genérico para referirse a columnas y/o filas (completas).
Gracias por tomarte el tiempo de leerme, espero que alguien pueda tomarse el tiempo de aclarar mi duda sobre la definición de track y a su vez la diferencia que existe con area.

1
Gabriel Quevedo
Gabriel Quevedo
Estudiante

Minuto 3:53 “No va a ser una hoja de estilos para HTML solamente, sino para también otros lenguajes también demarcado”…

Para qué otro lenguaje se usa CSS?! 😒

2
Randy Oswaldo Guerra Padilla
Randy Oswaldo Guerra Padilla
Estudiante

Que es 1fr, no me quedo de todo claro, alguien me puede aclarar eso?.

4