====== Grid ======

Módulo de [[informatica:diseno_web:css|CSS]] dedicado a la organización de elementos en una página.

El sistema Grid permite definir una cuadrícula bidimensional

  * [[https://caniuse.com/#search=grid|Soporte de Grid en navegadores]]

===== Uso =====

Para usar grid, se utiliza la propiedad ''display'' con el valor ''grid'' en el elemento que haga de contenedor:

<code css>
body {
    display: grid;
}
</code>

Si fueran varios cojntenedores grid para mostrar en línea: ''display: inline-grid''.

A continuación es necesario espeficiar una plantilla de columnas o filas. Si queremos 12 columnas de igual tamaño:

<code css>
body {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}
</code>

Para las filas, usaríamos ''grid-template-rows''.

<WRAP center round info 60%>
La unidad ''fr'' indica cuántas "fracciones" del ancho total ocupará un columna o fila
</WRAP>





==== Tamaño de los elementos ====

  * ''grid-column-start''
  * ''grid-column-end''
  * ''grid-column'' es una combinación de las dos anteriores

Si tenemos una rejilla de 12 columnas y queremos que un elemento ocupe 3 columnas:

<code css>
.feature {
    grid-column-end: span 3;
}
</code>

==== Posicionamiento avanzado de los elementos ====

<code css>
body {
    display: grid;
    grid-template-areas:
        "title  title .   .    ."
        ".      date  .   desc desc"
        "attend .     .   desc desc"
        ".      img   img .    ."
        ".      img   img .    footer";
}
</code>

<WRAP center round info 60%>
El espacio en blanco indica separación entre columnas. Para describir celdas vacías es convención utilizar el punto (''.'')
</WRAP>


Habremos construidos una cuadrícula de 5 columnas y 5 filas. Para indicar qué elemento se colocará dónde, le indicamos el nombre del área que usamos en la plantilla:

<code css>
h1 {
    grid-area: title;
}
time {
    grid-area: date;
}
.desc {
    grid-area: desc;
}
.attend {
    grid-area: attend;
}
.img {
    grid-area: img;
}
footer {
    grid-area: footer;
}
</code>

===== Rejillas implícitas =====

  * ''grid-auto-flow''

Para definir una rejilla implícita, estableceremos el flujo automático de elementos en filas y permitiremos que rellenen huecos cambiando el orden si es necesario (''dense''):

<code css>
main {
    display: grid;
    grid-auto-flow: row dense;
}
</code>

===== Número de pistas dinámico =====

<code css>
grid-template-columns: repeat(auto-fit, 350px);
</code>

Con ''auto-fit'' estamos indicando que se calcule el número de columnas necesario para rellenar los espacios.

Tamaño de pistas dinámico:

<code css>
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
</code>

Esto nos definirá cuantas columnas sean necesarias de idéntico ancho de forma que rellenen el contenedor.