{"id":499,"date":"2023-11-20T22:53:25","date_gmt":"2023-11-20T22:53:25","guid":{"rendered":"https:\/\/javigomez.org\/?p=499"},"modified":"2025-09-29T20:33:55","modified_gmt":"2025-09-29T20:33:55","slug":"grid-manejo-de-grid-en-css","status":"publish","type":"post","link":"https:\/\/javigomez.org\/index.php\/2023\/11\/20\/grid-manejo-de-grid-en-css\/","title":{"rendered":"Grid – Manejo de Grid en CSS"},"content":{"rendered":"\n

Modalidades de grid<\/mark><\/strong><\/p>\n\n\n\n

Tipo de elemento  Descripci\u00f3n<\/strong><\/p>\n\n\n\n

inline-grid  Establece una cuadr\u00edcula con \u00edtems en l\u00ednea, de forma equivalente a inline<\/strong>-block<\/strong>.<\/p>\n\n\n\n

grid  Establece una cuadr\u00edcula con \u00edtems en bloque, de forma equivalente a block<\/strong>.<\/p>\n\n\n\n

Definir filas y columnas<\/mark><\/strong><\/p>\n\n\n\n

Propiedad  Valor  Descripci\u00f3n<\/strong><\/p>\n\n\n\n

grid-template-columns  [col1] [col2] …  Establece el SIZE  de cada columna (col 1, col 2…).<\/p>\n\n\n\n

grid-template-rows  [fila1] [fila2] …  Establece el SIZE de cada fila (fila 1, fila 2…).<\/p>\n\n\n\n

Unidad fracci\u00f3n restante (fr)<\/mark><\/strong><\/p>\n\n\n\n

 grid-template-columns: 1fr 1fr;<\/p>\n\n\n\n

 grid-template-rows: 2fr 1fr;<\/p>\n\n\n\n

Filas y columnas repetitivas<\/mark><\/strong><\/p>\n\n\n\n

 grid-template-columns: 100px repeat(4, 50px) 200px;<\/p>\n\n\n\n

 grid-template-rows: repeat(2, 1fr 2fr);<\/p>\n\n\n\n

Funci\u00f3n minmax()<\/mark><\/strong><\/p>\n\n\n\n

Funci\u00f3n  Descripci\u00f3n<\/strong><\/p>\n\n\n\n

minmax(min, max)  Define un rango entre min y max.<\/p>\n\n\n\n

Atajo: La propiedad grid-template<\/mark><\/strong><\/p>\n\n\n\n

Propiedad  Valores  Descripci\u00f3n<\/strong><\/p>\n\n\n\n

grid-template  none | grid-template-rows \/ grid-template-columns  Atajo para definir dimensiones del grid.<\/p>\n\n\n\n

Huecos en grid<\/mark><\/strong><\/p>\n\n\n\n

Propiedad  Descripci\u00f3n<\/strong><\/p>\n\n\n\n

column-gap  Establece el  de los huecos entre columnas (l\u00edneas verticales).<\/p>\n\n\n\n

row-gap  Establece el  de los huecos entre filas (l\u00edneas horizontales).<\/p>\n\n\n\n

gap\u00a0 <row-gap> <columna-gap><\/p>\n\n\n\n

Propiedades de alineaci\u00f3n<\/mark><\/strong><\/p>\n\n\n\n

Propiedad  Valores<\/strong>  Afecta a…<\/strong><\/p>\n\n\n\n

justify-items  start | end | center | stretch  Elementos eje principal<\/p>\n\n\n\n

align-\u00edtems  start | end | center | stretch  Elementos eje secundario<\/p>\n\n\n\n

justify-content  start | end | center | stretch | space-around | space-between | space-evenly  Contenido eje principal<\/p>\n\n\n\n

align-content  start | end | center | stretch | space-around | space-between | space-evenly  Contenido eje secundario<\/p>\n\n\n\n

Propiedad  Descripci\u00f3n<\/strong><\/p>\n\n\n\n

justify-self  Altera la alineaci\u00f3n del \u00edtem hijo en el eje horizontal y la sobrescribe con la indicada.<\/p>\n\n\n\n

align-self  Altera la alineaci\u00f3n del \u00edtem hijo en el eje vertical y la sobrescribe con la indicada.<\/p>\n\n\n\n

Propiedad  Valores  Descripci\u00f3n<\/strong><\/p>\n\n\n\n

place-items  [align-items] [justify-items]  Propiedad de atajo para *-items<\/p>\n\n\n\n

place-content  [align-content] [justify-content]  Propiedad de atajo para *-content<\/p>\n\n\n\n

place-self  [align-self] [justify-self]  Propiedad de atajo para *-self<\/p>\n\n\n\n

Orden de los elementos<\/mark><\/strong><\/p>\n\n\n\n

Propiedad  Valor  Descripci\u00f3n<\/strong><\/p>\n\n\n\n

order  0 | NUMBER  N\u00famero (peso) que indica el orden de aparici\u00f3n de los \u00edtems.<\/p>\n\n\n\n

Grid por \u00e1reas<\/mark><\/strong><\/p>\n\n\n\n

Propiedad  Valores  Descripci\u00f3n<\/strong><\/p>\n\n\n\n

grid-template-areas  nombre | .  Indica la disposici\u00f3n de las \u00e1reas en el grid. Cada texto entre comillas simboliza una fila<\/p>\n\n\n\n

grid-area  auto | nombre  Indica el nombre del \u00e1rea. Se usa sobre \u00edtems hijos del grid.<\/p>\n\n\n\n

   grid-template-areas: “head head”<\/p>\n\n\n\n

                         “menu main”<\/p>\n\n\n\n

                         “foot foot”;<\/p>\n\n\n\n

  .item-1 { grid-area: head; background: blue; }<\/p>\n\n\n\n

Inicio-fin de filas y columnas<\/mark><\/strong><\/p>\n\n\n\n

\n

Propiedad\u00a0 Descripci\u00f3n<\/strong><\/p>\n\n\n\n

\n

grid-column-start  Indica en que columna empezar\u00e1 el \u00edtem de la cuadr\u00edcula.<\/p>\n\n\n\n

grid-column-end\u00a0 Indica en que columna terminar\u00e1 el \u00edtem de la cuadr\u00edcula.<\/p>\n\n\n\n

grid-row-start\u00a0 Indica en que fila empezar\u00e1 el \u00edtem de la cuadr\u00edcula.<\/p>\n\n\n\n

grid-row-end\u00a0 Indica en que fila terminar\u00e1 el \u00edtem de la cuadr\u00edcula.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n