Crea tu web, tutor html, css

Definiendo el grid 

esquema html con grid

Un esquema grid se basa en dividir el espacio en un cierto número de columnas y filas para alojar los elementos html de la página

Para acomodarlos correctamente las celdas pueden unirse formando areas.

La disposición o layout de los elementos se define mediante el estilo del contenedor y los estilos de los elementos contenidos.


Como definir 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

<style>
.grid-pagina{
  display:grid;
  grid-template-rows: auto auto 200px auto;
  grid-template-columns:repeat(4,auto);
  grid-row-gap: 5px;
  grid-column-gap: 5px;
}
.grid-pagina >div{
  border: 1px solid black;
  background: aliceblue;
  text-align: center;
}
.header{
  grid-column-start: 1;
  grid-column-stop: 5;
}
.content{
  grid-column: 2/ span 3;
}
.pie{
  grid-column: 1/ span 4
}
</style>
Para el cuerpo de la página colocamos sendos div para el contenedor y para los items contenidos
<div class="grid-pagina">
    <div class="header">cabecera</div>
    <div class="nav">navs</div>
    <div class="nav">navs</div>
    <div class="nav">navs</div>
    <div class="nav">navs</div>
    <div class="indices">indice</div>
    <div class="content">conten</div>
    <div class="pie">el pie</div>
</div>
Comprueba como queda en el editor online

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

En esencia la estrategia de uso del modelo grid es defnir la cuadrícula (filas y columnas) y a continuación encajar los items.

Cada item ocupará al menos una celda. Si son más se indica mediante la fila/columna de inicio y final. Para referirse a ellas se usa la linea en la que comienzan las filas o columnas.

Es posible señalar el número de filas o columnas ocupados en lugar de la fila o columna final (span).