Definiendo el grid

Fíjate en la imagen: un esquema de una página web con su cabecera, una barra para menu de navegaciónsu, barra laterales y su pie, además del contenido.

Esto puede hacerse tanto con bloques div convenientemente dispuestos usando bloques y elementos inline. También se podría hacer usando varios bloques flexbox. Y se puede hacer definiendo un Grid que ve la pa´gina como un modelo bidimensonal para distrinbuir un contenido.

El Grid se parece a los primeros tiempos del HTML, cuando las páginas se maquetaban usando tablas, pero este modelo es bastante más potente y da más posibilidades.

Comezamos a definir una estructura de página como la mostrada en la imagen. Como es habitual necesitamos un contenedor que englobe a todo el contenido y que se mostrará con el display:grid. En ese misma clase definiremos las filas y columnas.

Para definir el número de filas y columnas las reglas grid-template-rows y grid-template-columns. Se pueden unificar con el atajo grid-template. Comenzaré con una sintaxis simple, más adelante usaremos atajos y alternativas.

Número de filas: se asigna a grid-template-rows una lista separada por espacios de los altos de cada fila,

Número de columnas: se asigna a grid-template-columns una lista separada por espacios de los altos de cada fila

Por la estructura podemos usar un total de 4 columnas con 4 filas. Las dimensiones lógicamente son proporcionales, si te guias por la imagen lo verás. Ahora se trata de definir las filas y columnas

Las filas y las columnas se definen con una lista de valores para darles su tamaño (ancho a columnas o alto a filas). Una lista opr fila y una lista por columna. Observa que en las columas como definido 4 valores iguales, se ha usado la función repeat(numero, valor que se repite). Las unidades son las habituales de CSS y una nueva fr o fracción de espacio libre. Es una unidad relativa, se manera que si todas las comunas se les da un acho 1fr y a una se le da 2fr, ésta será doble de ancha que las demás.

Una vez definido el contenedor se definen las clases de los items o bloques que se van a colocar en el grid. Si no se indica nada cada item ocupa una celda de la cuadrícula. Pero si queremos definir su posición y tamaño debemos describir el área que ocupan indicando filas y columnas de inico (start) y fin (end).

Las columnas o filas de inicio se dan por el número de la linea donde comienza o termina la columna o la fila. Por eso en el ejemplo el bloque header tiene como inicio de columna la linea 1 y como final la linea 5, sería el inicio de la columna 5 o final de la columna 4.

Si estos números son negativos se cuentasn al revés: desde la derecha y abajo de la cuadrícula. El -1 en la fila sería el borde inferior y en columnas sería el borde derecho.

En el bloque conten se usa un atajo para la columa: template-colum, se dan los valores de inicio y final separados por la barra inclicnada /. Y si te fijas la columna final esta vez viene dada de otra forma: indicando lo que ocupa spn 4, quiere decir que este bloque va a ocupar 4 columnas. Existe otro atajo similar para las filas (row-column).

El últmo bloque es el pie que lo he definido con el atajo template-column y span