Conceptos para comenzar

2/13
Recursos

Aportes 24

Preguntas 1

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi√≥n.

Conceptos de la clase:

  • Container: Es un contenedor donde se almacenan los elementos

  • Item: Son los elementos que estan en el contenedor y se convierten en Grid Item pueden ser (botones,links,imagenes y videos)

  • Lineas : Son los elementos que dividen las filas y columnas de una Grilla


  • Celda: Es la unidad minima que tenemos en una Grilla, esta delimitada por 4 lineas. Ocupa 1 columna, 1 Fila

  • Track: Los track son un grupo de celdas que estan en una misma fila o una misma columna

  • Area: Pueden usar varias filas o varias columnas al mismo tiempo

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

¬ŅComo comenzar con CSS Grid?

La mejor manera para poder entender bien CSS grid es tener claros los conceptos b√°sicos tales como:

  • Contenedor: Es quien almacenara nuestros elementos

  • Elementos: Estos ya los conocemos, pueden ser etiquetas de links, im√°genes, o el que necesitemos. Podremos trabajar con ellos a trav√©s de sus propiedades al convertirse en grid item.

Otros conceptos a tener en cuenta son:

  • l√≠neas: dividen nuestras filas y columnas
  • Celda: La m√≠nima unidad que se puede tener dentro de una grilla y ocupa una fila y columna.
  • Track: Grupo de celdas que solo puede estar en una fila o en una misma columna
  • √Ārea: A diferencia de track, el √°rea puede ocupar varias filas y varias columnas.

Recordemos que al trabajar en con CSS Grid nos referimos en inglés a líneas y columnas:

  • L√≠nea / row
  • Columna / column

Un gran material de apoyo para poder complementar este curso, es css-tricks y su guía sobre css grid: Guia de css-grid

Contenedor

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.

Nunca habia entendido algo tan rapido y tan secillo hasta hoy…

track, son todas aquellas celda que se ubican en lla misma fila o misma columna

area, son todas aquellas que involucran a varias celda que pueden estar o no en la misma fila y area

<div class=‚Äúcontenedor‚ÄĚ> /esto es del contenedor/
<div class=‚Äúitem item-1‚ÄĚ>1</div> /esto item/
<div class=‚Äúitem item-2‚ÄĚ>2</div>
</div>

Anotaciones de la clase:

  • Contenedor: es el recipiente donde se van almacenar otros elementos

  • √ćtem: Son los elementos que est√°n dentro del contenedor

  • Lineas: elementos que limitan o dividen las filas y columnas de una grilla

  • Celda: Unidad m√≠nima que tenemos dentro de una grilla

  • Track: grupos de celdas que conforman una fila o una columna

  • √Ārea: Grupo de celdas conformadas por columnas y filas

Bueno dejo reto resuelto me demore much√≠simo me toco apoyarme con unos comentarios debido que los n√ļmeros no me cuadraban por ning√ļn lado puede ser que como lo realice no sea buena practica lo quer√≠a intentar hacer

Aqu√≠ les dejo art√≠culos de cada uno de los temas que toc√≥ la profe ūüėĄ

Conceptos para comenzar


  • Container: Espacio donde se almacenan elementos y ser√°n parte de la grilla.
  • Item: Elementos dentro del contenedor, pueden ser links, im√°ganes, botones, etc.
  • L√≠nea: Elementos que limitan filas y columnas de la grilla.
  • Celda: Unidad m√≠nima que tendremos dentro de una grilla, est√° limitada por 4 l√≠neas.
  • Track: Grupos de celda que est√°n en una misma columna o fila.
  • √Ārea: Pueden usar varias filas o columnas a la vez.

Es importante que conozcamos algunos conceptos básicos y así tener un mejor entendimiento de nuestro código.

Para aquellos que se confunden entre filas y columnas, piensen en las columnas como una columna vertebral, osea, hacia abajo ūüėĀ

Contenedor: Es el elemento que se va a convertir en una grilla.

Item: Son los elementos que est√°n dentro del contenedor y todos se convertir√°n en grid-items.

Líneas: Son los elementos que limitan o dividen las filas y columnas de una grilla.

Celda: Es la unidad mínima que nosotros podemos tener dentro de una grilla y está delimitada por 4 líneas y solo ocupa una fila y una columna.

Muy interesante.
Mientras estaba haciendo un clon de la pagina de platzi ve√≠a eso de ‚Äúgrid area‚ÄĚ y no lo entend√≠, le√≠ un poco de documentacion y no terminaba de entender, supose que en los futuros cursos de css grid lo explicar√≠an y asi ha sido, aqu√≠ lo estoy entendiendo

CSS GRID usa un sistema bidimensional basado en filas y columnas que proveen un esquema o espacio de trabajo llamado grid o grilla o cuadricula, seg√ļn como mejor se pueda entender.
Con CSS GRID puedes posicionar de manera m√°s sencilla elementos con patrones definidos, como albumnes de fotos, listas, articulos de blog, hasta la misma p√°gina de estudio donde estamos leyendo esto nos ayuda a ver el potencial de css grid.

Los conceptos me recuerdan a una hoja de c√°lculo.

Profesora comente mi comentario para darme animos de terminar el curso ūüėĄ

Conceptos b√°sicos

  • Contenedor: Es el elemento que se va a convertir en una grilla.
  • Items: Son los elementos que est√°n dentro del contenedor.
  • L√≠neas: Elementos que limitan o dividen las filas y columnas de una grilla. Las columnas se numeran de izquierda a derecha y las Filas se numeran de arriba hacia abajo.
  • Celda: Es la unidad m√≠nima que podemos tener dentro de una grilla. Est√° delimitada por 4 l√≠neas y normalmente ocupa una fila y una columna.
  • Tracks: Son grupos de celdas que est√°n en una misma fila o en una misma columna.
  • Areas: Son grupos de celdas que usan varias filas y columnas a la vez.

Conceptos iniciales

  1. Contenedor es el elemento donde se ponen mas componentes.

  2. Items, son esos elementos dentro del contenedor, pueden ser de cualquier tipo, ejemplo:
    Links, im√°genes, botones, etc.

  3. Lineas: Son los elementos que limitan o dividen el contenido. las lineas verticales (columnas)que dividen los contenedores
    se enumeran de izquierda a derecha, las lineas horizontales (filas) se enumeran de arriba hacia abajo.
    Rows = Filas / columns = columnas.

  4. Celda: es la unidad mínima dentro del grid, esta delimitado dentro de cuatro lineas.

  5. Grupos de Celdas:

    5.1 Tracks: son los grupos de celdas dentro de una misma fila o en una misma columna.

    5.2 √Ārea: pueden usar varias columnas y filas a la vez.

Container: Veamoslo como una canasta
Item: son cosas que van a i r en esa canasta
lineas: son las division de nuestro grid
celdas: es ese cudrado que hacido dibido con nuestras arias
Area: area conjuntos de filas y columnas

Conceptos para comenzar:

  1. Grid
  2. Grid Item
  3. Line
  4. Cell
  5. Track - Area