INTRODUCCIÓN A GRID

Grid es un layout, es un valor del la propiedad display al igual que display block, display flex, display inline, etc

Cuando trabajamos con el grid trabajamos en el layout atravez de grillas

Conceptos basicos.

  • Grid container: igual a flex container
  • Grid item: son las grillas (las cajas)
  • Grid Cell
  • Grid Tracks(Column y Row):
  • Grid area
  • Grid line(Column line y Row line)

    • Esto es una grilla

    -Creamos las filas con:
    grid-template-rows:
    -Creamos las columnas con:
    grid-template-columns:

    Para crearlas les damos un valor en pixeles asi:

    grid-template-rows:120px 120px 120px;
    grid-template-columns:120px 120px 120px;


    Grid-container

    1
    2
    3
    4
    5
    6
    7
    8
    9

    Si queremos que las la ultimas columnas se muevan las movemos con 1fr (Parecido a flex grow)

    grid-template-rows:150px 150px 150px;
    grid-template-columns:150px 150px 1fr;


    1
    2
    3
    4
    5
    6
    7
    8
    9

    Ahora vamos a crear 12 Grid-item donde van a haber 3 filas y 4 columnas, vamos a hacer que todas las columnas tengan 1fr.

    grid-template-rows: 150px 150px 150px;
    grid-template-columns: 1fr 1fr 1fr 1fr;


    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    Grid-container__Shord-hand Grid-gap

    grid-row-gap:

    Vamos a utilizar en el gridContainer la propiedad grid-row-gap: 10px;
    los 10 px son la separacion Esta propiedad permite establecer un margen entre cada fila de 10px


    1
    2
    3
    4
    5
    6

    grid-column-gap

    Vamos a utilizar en el gridContainer la propiedad grid-column-gap: 10px;
    los 10 px son la separacion Esta propiedad permite establecer un margen entre cada columna de 10px


    1
    2
    3
    4
    5
    6
    7
    8
    9

    grid-gap

    Para convinar ambas propiedades escribimos grid-gap: 10px;
    los 10 px son la separacion con esta propiedad separamos filas y columnas con un margen de 10px


    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12