CSS GRID

CSS GRID

La forma de enmaquetar nuestros proyectos ha ido cambiando a lo largo de los años.

CSS GRID

Actualmente aparece una nueva característica CSS y toca ponerse al día, ya que es compatible en practicamente en todos los navegadores en las versiones actualizadas

Con Grid podemos crear una rejilla donde podemos colocar nuestras etiquetas HTML en distinto orden al que se encuentra en el DOM.

En nuestro estándar de diseño podemos usar a la vez flex y grid.

1. Características para el elemento padre

grid / inline-grid / subgrid

Empezamos a etiquetar nuestro diseño grid.

display : grid;            se crean un solo contenedor

display: inline-grid;  se crea en fila contenedores grid

display: subgrid;       se crea un contenedor grid dentro de otro

Creamos el elemento que hará de rejilla / contenedor  donde se crearán los elementos hijos. Esto se llamará grid context . Podemos diseñar nuestra rejilla de varias maneras.

Tener en cuenta que las características CSS   column,  float,  clear, vertical-align  no tienen efecto en el contenedor grid.

grid-template-colums / grid-template-rows

El contenedor grid está formado por la línea horizontal representado por el eje X y por una línea vertical representada por el eje Y. Por lo que podemos decir que a diferencia de flex, el diseño grid está formado en 2 dimensiones.

grid-template-columns :;  define el diseño en el eje Y

grid-template-rows:;          define el diseño en el eje X

Con sus valores definimos las filas o columnas que queremos con su tamaño y su nombre

grid-template-columns : [columna1] 200px [columna2] 30%;

grid-template-rows: repeat(3,  20px [filas]) 5%;

grid-template-colums / grid-template-rows

Con los valores definimos las filas o columnas que queremos con su tamaño y su nombre

grid-template-columns : [columna1] 200px [columna2] 30%; se crean dos columnas, una de 200px y otra el 30% del viewport

grid-template-rows: 1fr 1fr 1fr; se divide en tres partes iguales las tres filas definidas

grid-template-rows: repeat(3,  20px [filas]) 5%; se crean 3 filas de 20px con 5% separacion

grid-template-columns: minmax(100px,300px) 1fr 1fr; especifica que el tamaño puede ser de 100px a 300px según el viewport

grid-template-rows: minmax(100px,auto); especifica que el tamaño oscila de 100 a auto

grid-template-colums: repeat(auto-fill, 200px); se rellena el viewport con tantas columnas de 200px hasta completar su espacio

git-template-rows: repeat(auto-fill,minmax(100px,1fr)); tantas columnas hasta completar el viewport de un ancho 100px o flexible

grid-template-colums / grid-template-rows

Si usamos la medida auto para definir la rejilla, el espacio se dividirá equitativamente entre las rejillas que haya.

grid-template-columns : auto auto auto; se divide el espacio total que haya entre tres. Aunque parezca parecido a fr no es lo mismo. fr tiene preferencia sobre auto, y si hubiese las dos unidades juntas, fr se llevaría todo el espacio posible y auto tendría el espacio suficiente para mostrar el contenido del grid-cell.

 

grid-template-colums / grid-template-rows

Si usamos la medida repeat para definir la rejilla, podemos indicar que una medida se repita en varias situaciones según la cantidad indicada.

grid-template-columns : repeat(6, 1fr);  Se forma una rejilla que estará formada por seis columnas y cada una estará formada por una fracción del ancho total del viewport.

 

grid-template-colums / grid-template-rows

Si usamos la medida minmax para definir la rejilla dandole una medida como mínimo y una medida como máximo, el espacio se dividirá equitativamente entre las rejillas que haya.

grid-template-columns : minmax(400px,1fr) 1fr; se divide el espacio total que haya entre dos columnas. La primera columna tendrá como máximo  1fr y como mínimo 400px segun el tamaño del viewport , y la segunda columna ocupará 1fr.

El ancho de la columna o fila puede venir determinado por el contenido, tanto la parte mínima o la máxima. Usaremos min-content y max-content.

grid-template-columns : minmax(min-content,max-content) 1fr; se divide el espacio total que haya entre dos columnas. La primera columna estará delimitada por su contenido mínimo y su contenido máximo, y la segunda columna ocupará 1fr.

grid-template-colums / grid-template-rows

Se pueden combinar palabras especiales como minmax, repeat para formar una combinación de las columnas.

grid-template-columns : repeat(4,

                                                       minmax(400px,1fr)

                                                       minmax(200px,1fr)

                                                       minmax(100px,150px)

                                                   ); se repite cuatro veces la combinación de tres columnas, en las que la primera columna tendrá como mínimo 400 px y como máximo 1fr, y la segunda columna contendrá un mínimo de 200px y máximo 1fr, y la tercera columna tendrá como mínimo 100px y máximo 150px.

grid-template-colums / grid-template-rows

Se pueden combinar palabras especiales como auto-fill, auto-fit, repeat para formar una combinación de las columnas.

grid-template-columns: repeat(auto-fill,minmax(200px,1fr));  

grid-template-columns: repeat(auto-fit,minmax(200px,1fr));

con auto-fill , convierte la rejilla con las medidas dadas aún si no hay bastantes grids sus huecos quedan sin ocupar.

con auto-fit, crea tantos grid como quepan y según el espacio que sobre o falte convierte cada grid con la medida resultante.

        grid-template-columns: repeat(auto-fill,minmax(200px,1fr));

esto puede provocar overflow en el viewport pero podemos hacer

        grid-template-columns: repeat(auto-fill,minmax(min(100%,25rem),1fr));

grid-template-colums / grid-template-rows

También podemos usar la propiedad fit-content(), ajusta un tamaño dado a un tamaño disponible de acuerdo a la fórmula min(maximum size, max(minimum size, argument)), que se calcula de forma similar a auto (es decir, minmax (auto, max-content)), excepto que el tamaño de la pista se fija en el argumento si es mayor que el mínimo automático.

grid-template-columns: fit-content(100px) 150px 150px 150px; 

 

grid-template-areas

Define una plantilla de cuadrícula haciendo referencia a los nombres de las áreas de rejilla que se especifican con la propiedad grid-area. Al repetir el nombre de un área de cuadrícula, el contenido abarcará esas celdas. Un período significa una celda vacía. La sintaxis en sí proporciona una visualización de la estructura de la cuadrícula.

Definiremos independientemente el eje X y el eje Y, después nos encargaremos de definir la estructura de la rejilla.

grid-template-areas

Los valores que puede aceptar son los nombres de los grid-area que hayas definido y en el caso que queramos que una sección quede sin definir usaremos el . .

#page{
  display:grid;
  width:100%;
  height:300px;
  grid-template-columns: 150px 1fr;
  grid-template-rows: 50px 1fr 30px 50px 40px;
  grid-template-areas: "header header"
                        "nav main"
                        "nav main"
                        "nav  footer"
                        " .   footer";
}

El punto . indica que esa celda quede vacía.

grid-area

Los grid-area serán los nombres que daremos a los hijos que están contenidos dentro de nuestro bloque.

Los podemos definir:

  1. Nombre que nosotros queramos darle.  grid-area: <name>;

grid-template

Sirve como abreviación para definir grid-template-rows, grid-template-columns, grid-template-areas.

.container { grid-template:   [row1-start] 25px "header header header" [row1-end]

    [row2-start] "footer footer footer" 25px [row2-end] / auto 50px auto; }

.container { grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];

grid-template-columns: auto 50px auto;

grid-template-areas: "header header header" "footer footer footer"; }

grid-column-gap/grid-row-gap

Con estas características definimos el espacio que queremos que quede entre rejilla y rejilla ya sea verticalmente con grid-column-gap o horizontalmente con grid-row-gap.

mo abreviación para definir grid-template-rows, grid-template-columns, grid-template-areas.

Para definir ambas características tendremos que indicar el tamaño del espacio que queremos, ya sea en px o en otra unidad.

grid-gap

La forma abreviada de definir las dos características anteriores.

#grid{

grid-gap: <grid-row-gap> <grid-column-gap>;

}

justify-items

Alinea el contenido dentro de un elemento de cuadrícula a lo largo del eje de la fila (en oposición a alinear elementos que se alinean a lo largo del eje de la columna). Este valor se aplica a todos los elementos de cuadrícula dentro del contenedor.

Los valores posibles son:

  • start
  • end
  • center
  • stretch (valor por defecto)

justify-items: start | end | center | stretch ;

align-items

Alinea el contenido dentro de un elemento de cuadrícula a lo largo del eje de la columna (en oposición a los elementos de justificación que se alinean a lo largo del eje de la fila). Este valor se aplica a todos los elementos de cuadrícula dentro del contenedor.

Los valores posibles son:

  • start
  • end
  • center
  • stretch (valor por defecto)

justify-items: start | end | center | stretch ;

place-items

Esta es la propiedad shorthand de las dos propiedades anteriores ( justify-items, align-items)..

place-items: [start | end | center | stretch] | [start | end | center | stretch]   ;

justify-content

A veces, el tamaño total de la cuadrícula puede ser menor que el tamaño de su contenedor de cuadrícula. Esto podría ocurrir si todos los elementos de la cuadrícula están dimensionados con unidades no flexibles como px. En este caso, puede configurar la alineación de la cuadrícula dentro del contenedor de cuadrícula. Esta propiedad alinea la cuadrícula a lo largo del eje de la fila (en contraposición al alinear el contenido que alinea la retícula a lo largo del eje de la columna).

Los valores posibles son:

  • start
  • end
  • center
  • stretch
  • space-around
  • space-between
  • space-evenly

align-content

A veces, el tamaño total de la cuadrícula puede ser menor que el tamaño de su contenedor de cuadrícula. Esto podría ocurrir si todos los elementos de la cuadrícula están dimensionados con unidades no flexibles como px. En este caso, puede configurar la alineación de la cuadrícula dentro del contenedor de cuadrícula. Esta propiedad alinea la cuadrícula a lo largo del eje de la columna (en oposición a justificar el contenido que alinea la cuadrícula a lo largo del eje de la fila).

 

Los valores posibles son:

  • start
  • end
  • center
  • stretch
  • space-around
  • space-between
  • space-evenly

grid-auto-columns/grid-auto-rows

Se especifica de una forma automática la medida de todos los grid implícitos que no quedan definidos. Imagina que definimos dos columnas con unas medidas concretas (explícito), si tuviese mas elementos al no estar definidos serían implícitos y recibirían las medida que especificaramos con grid-auto-columns.

Las unidades que podemos usar son los px, el % y la fracción fr.

grid-auto-colums: 30x;

grid-auto-rows: 1fr;

grid-auto-flow

Especifica como colocaremos todos los elementos de nuestra rejilla grid. En un sentido horizontal (izq - der), vertical (arr - aba). Indicaremos dense si queremos que se rellenen huecos de nuestra rejilla.

Los valores posibles son:

  • row
  • column
  • row-reverse
  • column-reverse
  • dense(rellena los huecos)
  • row dense
  • column dense

grid-auto-flow: <row> | <column> | <dense> | <row dense> | <column dense>

grid

También se puede utilizar la característica grid de una forma abreviada.

grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [/ <grid-auto-columns>]];

 

direction

Como es sabido por todos no en todos los continentes se escribe de izquierda a derecha, de ahí esta característica:

direction: ltr;            left to right , de izquierda a derecha, por defecto

direction: rtl;           right to left, de derecha a izquierda, por defecto

 

order

Como sucedía en flex podemos usar order para ordenar nuestra rejilla en el orden que queramos. El valor por defecto es 0, así si tenemos varias rejillas y una la ponemos a 1, esta aparecerá al final y si le ponemos el valor -1, estará al principio de todos.

2. Características para los elementos hijos

grid-column-start/grid-column-end/grid-row-start/grid-row-column

Utilizaremos estas características para situar en una determinada rejilla al elemento que queramos.

grid-column-start: <number> | <name> | span <number> | span <name> | auto

grid-column-end: <number> | <name> | span <number> | span <name> | auto

grid-row-start: <number> | <name> | span <number> | span <name> | auto grid-row-end: <number> | <name> | span <number> | span <name> | auto

 

El atributo span seguido de un número, indica el número de espacios o de columnas que ocupará este grid.

grid-column/grid-row

La forma abreviada para definir grid-column-start / grid-column-end y para grid-row-start / grid-row-end

grid-column: <start-line> / <end-line >(espacio que ocupará) 

grid-row: <start-line> / <end-line> (espacio que ocupará)

 

El valor -1 indica la última fila o la última columna dependiendo la característica que estemos definiendo.

grid-area

Usaremos esta característica para darle un nombre a cada rejilla de los elementos hijos .

grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;

 

 

justify-self

Alinea el contenido dentro de un elemento de cuadrícula a lo largo del eje de la fila (en oposición a alinear-self que se alinea a lo largo del eje de la columna). Este valor se aplica al contenido de un solo elemento de cuadrícula.

 

Los valores posibles son:

  • start
  • end
  • center
  • stretch

align-self

Alinea el contenido dentro de un elemento de cuadrícula a lo largo del eje de la columna (en oposición a justificar-self que se alinea a lo largo del eje de la fila). Este valor se aplica al contenido de un solo elemento de cuadrícula.

Los valores posibles son:

  • start
  • end
  • center
  • stretch

Ejemplos de layout:

CSS GRID 

Enlaces de interes:

Made with Slides.com