Antes de empezar a trabajar con CSS Grid, es importante que conozcamos algunos conceptos básicos y así tener un mejor entendimiento de nuestro código. Vamos a ello.
Qué es contenedor
Es el elemento que se va a convertir en una grilla. Algo como una caja en la que vamos agregando elementos.
Qué son items
Son los elementos que están dentro del contenedor. Estos elementos pueden ser de cualquier tipo como links, botones, imágenes, etc. Todos ellos se convertirán en grid items. Esto quieres decir que por defecto van a tener propiedades que los ayudan a trabajar muy bien con nuestro sistema de grilla.
Qué son líneas
Son los elementos que limitan o dividen las filas o columnas de una grilla. Como vemos en el ejemplo, cuatro líneas dividen las tres columnas (columns), y se lee de izquierda a derecha. Tres líneas dividen las 2 filas (rows) y se enumeran de arriba hacia abajo.
Qué es celda
Es la unidad mínima que nosotros podemos tener en una grilla. Está delimitada por 4 líneas y normalmente solo ocupa 1 fila y 1 columna.
Qué es track
Es un grupo de celdas, que solo puede estar en una fila o en una misma columna.
Qué es área
Es un grupo de celdas, estas pueden usar varias filas o varias columnas a la vez.
Bastante simple, ¿verdad? Pues ya estamos listos para empezar a codificar nuestra primera grilla.
Contribución creada por: José Miguel Ventimilla (Platzi Contributor).
Hola, les dejo este comentario de un curso antiguo que explica TODO de CSS Grid. De verdad que lo leen y ya pueden empezar a trabajar, seguro servirá mucho para el curso. Saludos
Es el elemento que se va a convertir en una grilla. Como una canasta donde vamos metiendo cosas.
Ítems
Son los elementos que están dentro del contenedor y pueden ser de cualquier tipo ( links, botones, imágenes, etc.) y todos ellos se van a convertir en grid ítems.
Líneas
Las líneas son los elementos que limitan o dividen las filas o columnas de una grilla. En la imagen tenemos 3 columnas y 4 líneas dividiéndolas y se enumeran de izquierda a derecha, para las filas comenzamos a enumerarlas de arriba hacia abajo, en 2 filas tenemos 3 líneas. filas (rows) y columnas (columns).
Celda
Es la unidad mínima que tenemos en una Grilla, esta delimitada por 4 línea. Ocupa 1 columna y 1 Fila.
Track
Podemos hacer grupos de celdas en una misma fila o columna.
Área
Pueden usar varias filas o varias columnas a la vez.
Muy buena explicación teacher, por fin entendí lo que es un track 😜
Leía la definición junto a las ilustraciones pero no terminaba de comprenderlo. Tengo muchas ganas de hacer algún ejercicio. Espero entender bien la teoría para no tener problemas en la practica.
Profe le quiero agradecer seriamente que me acaba de aclarar que la GRILLA es el contenedor donde nos argumenta que es la canasta que hacemos para ir metiendo cositas. Muchas gracias.
Por fin una clase que no tenga 4 anos en Plazi.
El mundo va cambiado , y al ver que uno esta estudiando cosas de 4 anos atras, no tiene nada de emocion.
Las slides usualmente están en la primera clase de cualquier curso. Revisé en este curso e hice el cambio para que esté disponible, así que deberías poder verlos ahí, de cualquier forma te comparto el enlace de las slides para que puedas verlas. ¡Nunca pares de aprender! :green_heart:
