Introduccion a CSS-Grid

Para saber:

• GRID Context = Es el elemento contenedor y los items que tiene dentro.

• GRID Line = El contenedor esta formado por dos tipos de lineas:

  • Horizontales. (Eje X)
  • Verticales. (Eje Y)

  Podemos hacer referencias a estas mediante numeros o nombres.

• GRID Track = Es el nombre generico para un GRID Row o Column. Esta es el espacio entre dos GRID Lines consecutivos. Define la altura de un GRID Column o Row.

• GRID Cell = Es la interseccion entre un GRID Row y un Column.

• GRID Area = Es cualquier porcion del GRID contenida entre 4 GRID Lines. Puede contener N cantidad de GRID Cell.

Columnas y Filas

Para definir tanto Filas como Columnas tenemos los siguientes comandos:

• grid-template-columns = Definimos el ancho y cantidad de Columnas que deseamos definir.
  • Ej: grid-template-columns : 100px 100px 100px 100px ;
• grid-template-rows = Definimos el alto y la cantidad de Filas que deseamos definir.
  • Ej: grid-template-rows : 100px 100px 100px ;

Columnas

Ahora si queremos que una Fila ocupe dos Columnas tendrias que contar desde cual GRID Line deseas que comienze y hasta cual deseas que llegue.

• grid-column-start = Definimos cual es la GRID Line en la que inicia.
  • Ej: grid-column-start : 3 ;
• grid-column-end = Definimos cual es la GRID Line en la que finaliza.
  • Ej: grid-column-end : 5 ;

Una forma de unificar esto y hacerlo en una sola linea es:

• grid-column = Start / End .
  • Ej: grid-column : 3 / 5 ;

Filas

De igual manera si queremos que una Columna ocupe dos Filas se trabajaria de la misma manera.

• grid-row-start = *Idem
• grid-row-end = *Idem

Su manera simplifcada:

• grid-row = Start /End .

Ejemplo:

Moviendo la Caja 10 :

• grid-column : 3 / 5 ;
  • Muevo de la 3ra GRID Line a la 5ta GRID Line mi columna.

Ocupando Fila 2 y 3 con la Caja 6:

• grid-column : 2 / 3 ;

  • Me ubico en la columna de la caja 6 que se encuentra entre la 2da y 3ra GRID Line.

• grid-row : 2 / 4 ;

  • Luego le especifico que las filas a ocupar van desde la 2da GRID Line en el Eje Y hasta la 4ta GRID Line en el mismo Eje.

GRID-AUTO-ROWS/COLUMNS

En caso de que se creen mas elementos dentro de nuestra grid de manera implicita, usar grid-auto-rows/columns es una buena manera de solucionarlo.

GRID GAP

Tenermos tres comandos con los que podemos establecer canales entre las filas y las columnas.

• grid-column-gap
• grid-row-gap
• grid-gap: row column

FR

Una Fraccion es una unidad de medida que aprovecha el espacio disponible en el Eje X o Y.