DEV Community

Oswaldo Echeverría
Oswaldo Echeverría

Posted on • Updated on

Notas rápidas de Grid

#spanish #css3 #grid

🏁 Tabla de contenido 🏁

Idea del post

Esta es una guía rápida de uso de CSS3 GRID con el objetivo que tengas en mano los pasos u anotaciones para usar Grid en tus proyectos

Por último. Si te gusto este post déjame un ❤️

Contexto

  • Grid container: Es un espacio bidimensional que trabaja con filas y columna

grid container

  • Grid items: Son los elementos hijos y perteneces a un grid container

grid items

  • Grid cells: Es una cuadrícula compuesta de muchas celdas, al principio los grid-items ocupan una celda por cada grid-item

grid cells

Cada cuadrado pequeño conforma la grid y a este cuadrado pequeño se llama grid cell

  • Grid lines: Las cuadriculas estan compuestas de lineas verticales y lineas horizontales conocidas como column grid lines y row grid lines

Grid lines 1

veamos un grid de 3x3, es decir 3 filas y 3 columnas; Sin embargo, tiene 4 row grid lines y 4 columns grid line

Grid lines 2

Cada columna o fila tendrá una línea de inicio y una línea de fin.
Siempre habrá una línea más que columnas o filas.

Estos conceptos son importantes porque con esto podemos posicionar elementos en la grid

Grid lines 3

Supongamos que lo azul es un elemento o una imagen o un contenedor. Para posicionarlo donde está debo saber las líneas y su numeración.

Por ejemplo, este elemento azul está posicionado en
la row line de la 2 hasta la 4 y la column line de la 1 hasta la 3

  • Grid track: Es el espacio entre dos grid lines adyacentes, también se las conoce como fila y columna

Track imagen 1

  • Grid areas: Es el área donde se posicionan varias celdas. Un grid área puede estar formando por el número que sea de celdas, pero un grid área siempre debe ser rectangular o cuadrado

grid area 1

Grid container

Para llamar a una grid se lo hace con display: grid;. El height por defecto de los elementos grid es auto.
Si se aplica display grid inmediatamente rellena los espacios equitativamente.

Antes de display grid

imagen grid 1

Después de display grid

Imagen display grid 2

Flujo de display grid

El display grid por defecto es en fila, se lo puede referenciar con

grid-auto-flow: row;
Enter fullscreen mode Exit fullscreen mode

Imagem display row

Si se desea cambiarlo en dirección de columna se lo puede referenciar con

grid-auto-flow: column;
Enter fullscreen mode Exit fullscreen mode

Imagen grid column

Tracks

Los tracks son filas o columnas.

Propiedades para definir un track

  • Definición de columnas: Para definir una columna se hace de forma muy intuitiva. 
grid-template-columns: 100px 2cm 30%;
Enter fullscreen mode Exit fullscreen mode

se puede usar cualquier tipo de medida

Imagen track 1

En el html tenemos 6 ítems es por eso que se nos crea una fila implícita o automática.

Para definir filas o rows usamos.

grid-template-rows: 20px 4cm  20%;
Enter fullscreen mode Exit fullscreen mode
Valores para las columnas o filas implicitas

Cuando creamos uns fila o una columna y hay mas items de los que hemos definido se crean columnas o filas implicitas, estas columnas y filas no estan definidad por lo tanto estan en auto y tienen el tamaño de su contenido, pero si queremos controlar ese valor automatico a las filas o columnas lo podemos hacer de la siguiente manera:

Tenemos este ejemplo. Tenemos la fila 4 creada implicitamente y como vemos esta en auto y s height esta derivado de su contenido

Descripcion 1

Si usamos

grid-auto-flow:row; --> direccion grid
grid-auto-rows: 200px;
Enter fullscreen mode Exit fullscreen mode

Le estamos dando un tamaño a las filas implicitas y de esta manera controlamos

Descripcion 2

Si fuera en columna

grid-auto-flow: column;
grid-auto-colums:200px;
Enter fullscreen mode Exit fullscreen mode

Descripcion 3

repeat como valor

Podemos crear filas y columanas con repeat de la siguiente manera.
grid-template-row: repeat(5, 20px) De esta manera le decimos que cree 5 filas de 20px. Asi mimsmo podemos hacer con columnas.
grid-template-column: repeat(5, 20) De esta manera le decimos que cree 5 columnas de 20px.

patrones con repeat

Otra función que nos permite repeat es crear patrones de filas y columnas
Para crear patrones de columnas podemos usar.
grid-template-columns: repeat(3, 10px, 20%); Esto nos creará 3
columnas de 10px y 3 columnas de 20% pero intercalándolas. De la
misma manera podemos usar gris-template-rows: repeat(3, 10%,
30px); Esto nos creará 3 filas de 10% y 3 filas de 30px
intercalándolas

Unidad de medida

En grid puedes usar cualquier medida, pero se recomienda usar la medida de fracción o fr para que los grids sean felxibles Ejemplo.

grid-template-colums: 1fr 1fr 1fr. Lo que hace es dividir el espacio disponible en 3 fracciones.
En este ejemplo tenemos 6 elementos en un contenedor grid aplicando la creacion de 3 columnas de una 1fr equitativamente

unidad de medida

min content y max content

  • min-content: crea un track con el minimo de contenido posible, es decir su tamaño se definira en base a su minimo contenido posible, la columna crecera en base a la palabra mas grande o contenido mas grande

  • max-content: Ocupa el mayor contenido posible, es decir el tamanio de la columna se dara al mayor contenido posible

grid-template-columns: min-content max-content;
grid-template-rows: min-content max-content;
Enter fullscreen mode Exit fullscreen mode

El azul es min-content, el rojo es max-content

Min y max content

Nota: Esta propiedad se usa mas con columnas

fit content

No spermite definir un tamaño maximo para una fila o columna. Ejemplo

Le decimos que el tamaño minimo o inicial de la columna va a ser el min-content (que es el tamaño minimo del contenido) y cuando llege a 200px se desborde

grid-template-colums: fit-content(200px);
Enter fullscreen mode Exit fullscreen mode
minmax

Define el valor minimo o maximo de un track

grid-template-column: minmax(valor_minimo, volormaximo);
grid-template-column: minmax(80px, 300px);
Enter fullscreen mode Exit fullscreen mode

Vemos que se estira solo hasta los 300px

minmax

autofill

La definicion es autorelleno. En base a la medida del segundo parametro creara o rellenara cuanto elemento se pueda en el grid-container

grid-template-column: repeat(auto-fill, 10%)
Enter fullscreen mode Exit fullscreen mode

Aunque tenga 4 items creara las columnas que permita el contendedor, cada columna de 10%

autofill 1

Se puede usar con un valor fijo

grid-template-column: repeat(auto-fill, 300px)
Enter fullscreen mode Exit fullscreen mode

Calcula que el espacio del container solo entran dos columnas de 300 px

autofill 2

Tambien se puede usar con minmax()

grid-template-column: repeat(auto-fill, minmax(valor_minimo, valor_maximo));
grid-template-column: repeat(auto-fill, minmax(200px, 1fr));
Enter fullscreen mode Exit fullscreen mode

Con esta poropiedad creamos columnas dinamicamente

Y si vemos con la viewport mas alto y vamos encogiendo
Autofill dice mientras este el espacio para crear mas columnas lo hara y cuando llegue al valor minimo se desbordara hasta que llegue a una fraccion o 1fr

autofil 3

autofil 4

autofil 5

autofil 6

autofil 7

AutoFit

Fit significa ajustar, la diferencia con el autofill es que este valor no va a crear columnas o filas extras si hay espacio solo las que vamos a requerir

grid-template-column: repeat(auto-fit, minmax(valor_minimo, valor_maximo)); 
grid-template-column: repeat(auto-filt, 10%);
Enter fullscreen mode Exit fullscreen mode

Solo las columnas de los items disponibles

autofit 1

Alineacion de colums y rows

Justify items

Nos permite alinear las filas y columnas axis
grid-row. Tiene las propiedades
stretch | start | end | center. Ejemplo

Creamos una grid

grid-template-column: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
Enter fullscreen mode Exit fullscreen mode

justify 1

justify-items: start;
Enter fullscreen mode Exit fullscreen mode

justify 2

justify-items: end;
Enter fullscreen mode Exit fullscreen mode

justify 3n

justify-items: center;
Enter fullscreen mode Exit fullscreen mode

justify 4

Align items

Nos permite alinear las filas y columnas axis
grid-colum. Tiene las propiedades
stretch | start | end | center. Ejemplo

align-items: start;
Enter fullscreen mode Exit fullscreen mode

align 1

align-items: end;
Enter fullscreen mode Exit fullscreen mode

align 2

align-items: center;
Enter fullscreen mode Exit fullscreen mode

align 3

NOTA: El SHORTCUT para usar justify-items y align-items es:

place-items: valor_align-items valor_justify-items;
Enter fullscreen mode Exit fullscreen mode
Justify content

Nos permite linear la grid del axis horizontal siempre y cuando la grid o cuadricula sea menor que el contenedor, esto quiere decir que hay espacio disponible. Ejemplo

grid-template-columns: repeat(2, 150px);
grid-template-rows: repeat(2, 150px);
Enter fullscreen mode Exit fullscreen mode

justi con 1

Como vemos en la imagen la grid es mas pequeña que el contenedor grid

Las propiedades de Justify-content

start | end | Center | space-around | space-evenly | space-between

Align content

Nos permite linear la grid del axis vertical siempre y cuando la grid o cuadricula sea menor que el contenedor, esto quiere decir que hay espacio disponible

Las propiedades de Align-content
start | end | Center | space-around | space-evenly | space-between

Posicionamiento Grid item

Los grid-items se posicionan naturalmente en el orden del html y ocupan una celda. Para posicionar los items en grid debemos recordar que es un colum grid line y un row grid line. Cuando posicionamos un item debes decirle el inicio de la línea y el fin de la línea sea en row o column como un sistema de coordenadas

Grid column start y end

Para posicionar el comienzo de un ítem en la línea de una columna usamos grid-colum-start: ; y para definir el final de la posición del ítem usamos grid-column-end: ; Ejemplo.

Queremos que un ítem comience en la línea de la columna 3.
grid-column-start: 3;.

posicion 3

si no se especifica la línea final, por defecto será la que le sigue, en este caso la línea colum 4

Si añadimos una columna mas

posicion 4

Ahora queremos que el ítem 1 comience en la línea de la columna 3 y termine en la 5.

grid-column-start: 3;
grid-column-end: 5;
Enter fullscreen mode Exit fullscreen mode

Posicion 5

Este comando también se usa con rows veamos el siguiente ejemplo.
Que la columna ocupen de la línea 3 a la 5 y en fila ocupen de 3 a 5

grid-column-start: 3;
grid-column-end: 5;
grid-row-start: 3;
grid-row-end: 5;
Enter fullscreen mode Exit fullscreen mode

Para los comandos anteriores tenemos atajos o shortcuts que son:
grid-column: valor_start / valor_end; y para filas.
grid-row: valor_start / valor_end; así que con el ejemplo anterior quedaría así

grid-column: 3 / 5;
grid-row: 3 / 5;
Enter fullscreen mode Exit fullscreen mode

Posicion 6

Si en el shortcut ponemos solo un valor nos llevará el ítem a esa la línea start y tomará como valor end la siguiente línea. Ejemplo

tenemos la siguiente grid

Posicion 7

sí ponemos grid-row: 3; al elemento 3 nos dará lo siguiente

Posicion 7

SPAN

Sabemos que para posicionar un ítem necesitamos las coordenadas de las líneas de inicio y fin, span nos permite no definir la línea de fin, simplemente abarca la posición que se le ponga en span. Se usa:

grid-column: span valor
grid-row: span valor
Enter fullscreen mode Exit fullscreen mode

tenemos la siguiente grid

Posicion 8

Por ejemplo, usamos en el ítem 3 grid-column: span 2. Con esto estamos diciendo que el ítem 3 abarque 2 líneas column mas de la que actualmente esta

Posicion 9

asi mismo podemos usar para las filas, por ejemplo.
grid-row: span 3;, Le estamos diciendo que abarque 3 líneas en row más de la que actualmente está.

Posicion 10

también podemos usar la línea start + span

Posicion 11

de la imagen anterior queremos por ejemplo que el ítem 3 se posicione en la columna 2 y abarque 3 columnas o 3 line column.
Usariamos grid-column: 2 / span 3

Posicion 12

ahora que se posicione en la línea 1 en row y abarque 4 filas o 4 line row. Usariamos grid-row: 1 / span 4

Posicion 13

Numeros negativos

Para posicionar elementos o ítems también podemos usar números negativos, si vemos en alguna imagen anterior de las grids enumeradas podemos darnos cuenta de los números negativos. Estos referencian a la última posición de la grid.

Gutters o espaciadores

Es una propiedad que nos permite dar un espacio entre filas row-gap: ; y columnas column-gap: ;.

Ejemplo creamos la siguiente grid

grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
Enter fullscreen mode Exit fullscreen mode

Posicion 16

column-gap: 20px;
row-gap: 20px;
Enter fullscreen mode Exit fullscreen mode

o podriamos aplicar el shortcut gap: 20px 20px o simplemente gap: 20px que aplica tanto para filas y columnas

Posición 17

DENESE

Al personalizar el area que ocuparan los items dejamos en la grid espacios vacios

Posicion 18

Esta propiedad nos permite llenar estos espacios vacions de la forma mas ordenada posible.

grid-auto-flow: dense;    ---> Para filas
grid-auto-flow: column dense;  ---> Para columnas
Enter fullscreen mode Exit fullscreen mode

Grid area

Este es un shortcut para grid-column y grid-row y se define en el siguiente orden

  1. La posición inicial de la fila
  2. La posición inicial de la columna
  3. La posición final de la fila
  4. La posición final de la columna

Posicion 14

grid-area: 2 / 2 / 3 / 5;
Enter fullscreen mode Exit fullscreen mode

Posición inicial line row 2
Posición inicial line column 2
Posición final line row 3
Posición final line column 5

Posicion 15

Grid areas

  • Es la propiedad que nos permite organizar elementos en base a areas
  • Las areas pueden ser de una celda minimo y a partir de ahi pueden ser cuadradas o rectangulares
  • Nos permite nombrar areas en la grid, es decir ser mas especifico.
  • Define una palantilla refereciando nombres otorgados en la grid
  • Cada " " equivale una fila y dentro de las comillas van a ir los nombres de las columnas, estas columnas son implicitas al no definrlas se crean en automatico. Se la escirbe de la siguiente manera.

grid-template-areas: "columna1 columna2 columna3"

Para manejar el tamaño de las columnas implicitas podemos usar:

grid-auto-columns: ;   --> columnas
gris-auto-rows: ;      --> filas
Enter fullscreen mode Exit fullscreen mode

Ejemplo. Supongamos que tenemos esta base

Areas 1

/*  CREAMOS */

grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 10px;
Enter fullscreen mode Exit fullscreen mode

Areas 2

Por ejemplo quiero que header ocupe de la line column 1 a la 4 y la line row de la 1 a la 3. Tambien queremos que main ocupe la line column 4 a la 6 u line row de 1 a la 3

grid-template-areas:
"header header header main main"
"header header header main main";
Enter fullscreen mode Exit fullscreen mode

Area 3

Supongamos que no queremos que las dos ultimas celdas de main que se encuentran en la segunda fila no esten nobradas o seleccionadas usamos:

grid-template-areas:
"header header header main main"
"header header header .    .   ";
Enter fullscreen mode Exit fullscreen mode

Area 4

Ahora queremos un sidebar de la line column 1 hasta la 3 y line row de la 3 a la 4 y un footer de la line column de la 3 a la 6 y line row de la 3 a la 4

grid-template-areas:
"header header header main main"
"header header header .    .   "
"sidebar sidebar footer footer footer";
Enter fullscreen mode Exit fullscreen mode

area 5

Ahora queremos posicionar un elemento basta con usar.
grid-area: nombre_area Ejemplo

Sabemos que tenemos en el anterior ejemplo nombradas las areas con el template supongamos que queremos que html header opcupe el templete de header del area

.header {
    background: crimson;
    grid-area: header; ->nombre del area en el template
}
Enter fullscreen mode Exit fullscreen mode

area 6

Lines Columns y Lines Rows

A traves de las lines columns y lines rows es otra forma de posicionar los elementos.
Al momento de crear las columnas y filas, tambien podemos darle un nombre especifico a las lineas de columnas y filas que estamos creando de la siguiente manera

grid-template-columns: [linea-inicial] 1fr [linea-final] 1fr [linea-final-grid];
Enter fullscreen mode Exit fullscreen mode

Linwas 1

Los nombres de las lineas van en el orden de creacion

  1. Primero esta el nombre de la linea
  2. Segundo esta la primera columna
  3. Tercero esta el nombre de la segunda linea
  4. Cuarto esta la segunda columna
  5. Quinto esta el nombre de la ultima linea

Es decir tenemos dos columnas pero tenemos 3 lines columns y se escriben en codigo en el orden de creacion de izquierda a derecha.

La lineas pueden tener mas de un nombre como vemos a continuacion

grid-template-columns: [linea-inicial] 1fr [linea-final linea-inicial2] 1fr [linea-final-grid];
Enter fullscreen mode Exit fullscreen mode

Linea 2

Esta misma accion la podemos hacer con filas o rows con:
grid-template-rows: ;

Asi que de esta manera podemos posicionar los items de la siguiente manera por ejemplo

.item1{
   background: slateblue;
   grid-column: linea2 / linea4;
   grid-row: lnea-media/linea-final;
}
Enter fullscreen mode Exit fullscreen mode

Linea 3

NOTA: Habalando de mejores parcticas se recomienda las lineas de inicio y final de su elemento a posicionar y despues un sufijo relevante. Supongamos que en la siguiente imagen queremos posicionar el item2 como cabecera en al grid

Linea 4

.item2{
   background: crimson;
   grid-area: cabecera;
}

Cabecera es el nombre que le dimos a las lineas
Enter fullscreen mode Exit fullscreen mode 
grid-template-columns: [cabecera-start] 1fr 1fr 1fr 1fr [cabecera-end];

grid-template-rows: [cabecera-start] 1fr 1fr 1fr [cabecera-end];
Enter fullscreen mode Exit fullscreen mode

Linea 5

Ordenamiento

Funciona igual que el order de flexbox mientras el valor sea mas alto los elementos se pondran al final
Por defecto todos los grid-item tienen valor 0

grid-template-columns: repeat(4, 1fr);
Enter fullscreen mode Exit fullscreen mode 
.grid__item1{
    Padding: 20px 0;
    Font-size: 2rem;
    Color: #ffff;
    Text-align: center;
    Order: 1;
}
Enter fullscreen mode Exit fullscreen mode

ordenmaiento

Alineacion de un solo elemento en el axis

Se declaran en elos grid-items

Align-self: ;
Cuando quieres alinear solo un elemento en el vertical

justify-self: ;
Cuando quieres alinear solo un elemento en le eje horizontal

Shortcut
place-self: align justify;

Comandos resumen

Grid container

GRID

/* Direccion de grid en Horizontal o row*/
grid-auto-flow: row;

/*Direccion de fila en vertical o column */
grid-auto-flow: column;
Enter fullscreen mode Exit fullscreen mode

TRACK - COLUMNAS Y FILAS

/* Crear filas */
grid-template-rows:

/* Crear columnas*/
grid-template-columns:
Enter fullscreen mode Exit fullscreen mode 
/* valores para crear columnas o filas con grid-template */

repeat(3, 1fr); | 3 columnas de 1 fracccion

min-content max-content; | tamaño minimo y maximo del contenido

fit-content(valor_maximo); | tamaño minimo del contenido y se desborde en el valor_maximo

minmax(valor_minimo valor_maximo); | tamaño minimo y maximo especifico

repeat(auto-fill, 10%); | Cree todas las columnas o filas de 10% que el tamaño del contenedor le permita 

repeat(auto-fit, 10%); | Cree las filas o columnas deacuerdo a los items existentes
Enter fullscreen mode Exit fullscreen mode

Nombrar las lineas al momento de crear filas y columnas

grid-template-columns: [linea-inicial] 1fr [linea-media] 1fr [linea-final];

Lo mismo aplica para rows
Enter fullscreen mode Exit fullscreen mode

Grid areas
Permite crar filas y columnas a traves de una especia de template o plantilla y al mismo tiempo las podemos nombrar.

Cada fila esta dentro de "", comillas y dentro de las comillas estan las columnas.

Este template tiene que ser uniforme y equilivrado las areas pueden ser de 1 celda o mas simre y cuando sean de forma cuadrada o rectangulares.

Si quremos dejar vacio una celda remplazamos el valor por un ., punto

grid-template-areas:
" columna1 columna2 columna3 columna4 columna5"
" header   header   header   main     main    " 
" header   header   header   main     main    ";
Enter fullscreen mode Exit fullscreen mode

Si queremos manejar el tamaño de las filas o columnas que fueron creadas en automatico

grid-auto-columns: valor;
grid-auto-rows: valor;
Enter fullscreen mode Exit fullscreen mode

Alineacion para las columnas y filas

/* En horizontal */
justify-items: strech | start | end | center;

/* En vertical */
align-items: strech | start | end | center;

/* shortcut */
place-items: valor_align valor_justify;
Enter fullscreen mode Exit fullscreen mode

Cuando la grid sea mas pequeña que el tamaño del contenedor

/* En horizontal */
justify-content: strech | start | end | center;

/* En vertical */
align-content: strech | start | end | center;
Enter fullscreen mode Exit fullscreen mode

Grid items

Posicion de grid-items con coordenadas atraves de lineas.
Si las lineas tienen nombre pueden ser llamadas con el mimso nombre

Posicionamiento simple

/* Posicionamiento en columnas*/
grid-column-start: linea_inicio;
grid-column-end: linea_fin;

/* Posicionamiento en filas*/
grid-row-start: linea_inicio
grid-row-end: linea-fin;

/* shortcut */
grid-column: linea_inicio / linea_fin;

grid-row: linea_inicio / linea_fin;
Enter fullscreen mode Exit fullscreen mode

SPAN Posicionamiento sin definir la linea final

De la linea donde esta declarado el item se toma el numero de espacios de filos o columnas que este en span

grid-column: span2;
grid-row: 3 span 2
Enter fullscreen mode Exit fullscreen mode

Grid area
Posiciona un item o area por corrdenada de lineas

Patron en orden de lineas:
1. Posicion inicial fila: 2
2. Posicion inicial columna: 2
3. Posiion final fila:3
4. Posicion final columna: 5

entonces...

grid-area: 2 / 2 / 3 / 5 ;
Enter fullscreen mode Exit fullscreen mode

Gutters o espaciadores de filas y columnas

column-gap: valor
row-gap: valor

/* espaciado tanto para filas y columna*/
gap: valor
Enter fullscreen mode Exit fullscreen mode

Dense o relleno ordenado de items segun su direccion

/* Fila*/
grid-auto-fow: dense; 

/* Columna*/
grid-auto-flow: column dense;
Enter fullscreen mode Exit fullscreen mode

Ordenamiento de items

/* En el item se declara */

/* Por defecto en los items*/
order: 0;

/* Si el numero es menor va primero*/
order: -1;

/* Si el numero es mayor va al final */
order: 1;
Enter fullscreen mode Exit fullscreen mode

Alineacion de un solo grid-item

/* Vertical */
align-self: strech | start | end | center;

/* Horizontal */
justify-self: strech | start | end | center;

/* shortcut */
place-self: valor_align-self  valor_justify-self;
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

jamescardona11 profile image

Building a side project for developers - Part 1

James Cardona -

anogneva profile image

Nephalem's nightmare. Exploring errors in Diablo 3 server emulator code

Anastasiia Ogneva -

ezpieco profile image

Top 6 dev tools you must use!

Ezpie -

zoltanf profile image

Top JavaScript Game Engines

Zoltan Fehervari -