🏁 Tabla de contenido 🏁
- Idea del post
- Contexto
- Grid container
- Posicionamiento Grid item
- Comandos resumen
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 items: Son los elementos hijos y perteneces a un grid container
- Grid cells: Es una cuadrícula compuesta de muchas celdas, al principio los grid-items ocupan una celda por cada grid-item
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
veamos un grid de 3x3, es decir 3 filas y 3 columnas; Sin embargo, tiene 4 row grid lines y 4 columns grid line
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
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
- 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 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
Después de display grid
Flujo de display grid
El display grid por defecto es en fila, se lo puede referenciar con
grid-auto-flow: row;
Si se desea cambiarlo en dirección de columna se lo puede referenciar con
grid-auto-flow: 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%;
se puede usar cualquier tipo de medida
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%;
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
Si usamos
grid-auto-flow:row; --> direccion grid
grid-auto-rows: 200px;
Le estamos dando un tamaño a las filas implicitas y de esta manera controlamos
Si fuera en columna
grid-auto-flow: column;
grid-auto-colums:200px;
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%,
Esto nos creará 3 filas de 10% y 3 filas de 30px
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
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;
El azul es min-content, el rojo es 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);
minmax
Define el valor minimo o maximo de un track
grid-template-column: minmax(valor_minimo, volormaximo);
grid-template-column: minmax(80px, 300px);
Vemos que se estira solo hasta los 300px
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%)
Aunque tenga 4 items creara las columnas que permita el contendedor, cada columna de 10%
Se puede usar con un valor fijo
grid-template-column: repeat(auto-fill, 300px)
Calcula que el espacio del container solo entran dos columnas de 300 px
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));
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
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%);
Solo las columnas de los items disponibles
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);
justify-items: start;
justify-items: end;
justify-items: center;
Align items
Nos permite alinear las filas y columnas axis
grid-colum
. Tiene las propiedades
stretch | start | end | center
. Ejemplo
align-items: start;
align-items: end;
align-items: center;
NOTA: El SHORTCUT para usar justify-items
y align-items
es:
place-items: valor_align-items valor_justify-items;
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);
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;
.
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
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;
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;
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;
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
sí ponemos grid-row: 3;
al elemento 3 nos dará lo siguiente
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
tenemos la siguiente grid
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
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á.
también podemos usar la línea start + span
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
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
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);
column-gap: 20px;
row-gap: 20px;
o podriamos aplicar el shortcut gap: 20px 20px
o simplemente gap: 20px
que aplica tanto para filas y columnas
DENESE
Al personalizar el area que ocuparan los items dejamos en la grid espacios vacios
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
Grid area
Este es un shortcut para grid-column y grid-row y se define en el siguiente orden
- La posición inicial de la fila
- La posición inicial de la columna
- La posición final de la fila
- La posición final de la columna
grid-area: 2 / 2 / 3 / 5;
Posición inicial line row 2
Posición inicial line column 2
Posición final line row 3
Posición final line column 5
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
Ejemplo. Supongamos que tenemos esta base
/* CREAMOS */
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 10px;
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";
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 . . ";
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";
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
}
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];
Los nombres de las lineas van en el orden de creacion
- Primero esta el nombre de la linea
- Segundo esta la primera columna
- Tercero esta el nombre de la segunda linea
- Cuarto esta la segunda columna
- 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];
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;
}
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
.item2{
background: crimson;
grid-area: cabecera;
}
Cabecera es el nombre que le dimos a las lineas
grid-template-columns: [cabecera-start] 1fr 1fr 1fr 1fr [cabecera-end];
grid-template-rows: [cabecera-start] 1fr 1fr 1fr [cabecera-end];
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);
.grid__item1{
Padding: 20px 0;
Font-size: 2rem;
Color: #ffff;
Text-align: center;
Order: 1;
}
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;
TRACK - COLUMNAS Y FILAS
/* Crear filas */
grid-template-rows:
/* Crear columnas*/
grid-template-columns:
/* 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
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
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 ";
Si queremos manejar el tamaño de las filas o columnas que fueron creadas en automatico
grid-auto-columns: valor;
grid-auto-rows: valor;
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;
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;
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;
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
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 ;
Gutters o espaciadores de filas y columnas
column-gap: valor
row-gap: valor
/* espaciado tanto para filas y columna*/
gap: valor
Dense o relleno ordenado de items segun su direccion
/* Fila*/
grid-auto-fow: dense;
/* Columna*/
grid-auto-flow: column dense;
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;
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;
Top comments (0)