GUIA DE CSS GRID (PROGRAMACION WEB) PEDRO SAMPER IBAÑEZ
Contenido
1. Grid CSS (Cuadrículas)...........................................................................................................2
1.1 Grid con filas y columnas.................................................................................................3
1.2 fr: Unidad fracción restante.............................................................................................5
1.3 Filas y columnas repetitivas............................................................................................6
1.4 Grid por áreas......................................................................................................................6
1.5 Grid con huecos..................................................................................................................8
1.6 Atajo: Grid con huecos...................................................................................................10
1.7 Posición en el grid............................................................................................................10
1.8 Ajuste automático de celdas..........................................................................................12
1.9 Atajo: Grid..........................................................................................................................13
1.10 Propiedades para ítems hijos......................................................................................13
1.11 Atajo: grid-column y grid-row.....................................................................................16
2. REFERENCIA BIBLIOGRAFICAS........................................................................................17
3. TRABAJO COLABORATIVO.................................................................................................17
3.1 lea cuidadosamente la guía............................................................................................17
3.2 Entrega de producto comprimido con los archivos html y css............................17
[Escriba aquí]
GUIA DE CSS GRID (PROGRAMACION WEB) PEDRO SAMPER IBAÑEZ
1. Grid CSS (Cuadrículas)
Antes de comenzar con Grid CSS, quizás sería conveniente dominar el sistema
Flexbox, ya que Grid toma la filosofía y bases de él. Para utilizar Grid CSS
necesitaremos tener en cuenta una serie de conceptos que utilizaremos a partir de
ahora y que definiremos a continuación:
Contenedor: Existe un elemento padre que es el contenedor que definirá la
cuadrícula o rejilla.
Ítem: Cada uno de los hijos que contiene la cuadrícula (elemento contenedor)
[Escriba aquí]
GUIA DE CSS GRID (PROGRAMACION WEB) PEDRO SAMPER IBAÑEZ
Celda (grid cell): Cada uno de los cuadritos (unidad mínima) de la cuadrícula.
Área (grid area): Región o conjunto de celdas de la cuadrícula.
Banda (grid track): Banda horizontal o vertical de celdas de la cuadrícula.
Línea (grid line): Separador horizontal o vertical de las celdas de la cuadrícula.
Para utilizar cuadriculas Grid CSS, trabajaremos bajo el siguiente escenario:
Para utilizar cuadriculas Grid CSS, trabajaremos bajo el siguiente escenario:
Para activar la cuadrícula grid hay que utilizar sobre el elemento contenedor la
propiedad display y especificar el valor grid o inline-grid. Este valor influye en
cómo se comportará la cuadrícula con el contenido exterior. El primero de ellos
permite que la cuadrícula aparezca encima/debajo del contenido exterior (en
bloque) y el segundo de ellos permite que la cuadrícula aparezca a la
izquierda/derecha (en línea) del contenido exterior.
Tipo de
Descripción
elemento
Establece una cuadrícula con ítems en línea, de forma
inline-grid
equivalente a inline-block.
Establece una cuadrícula con ítems en bloque, de forma
grid
equivalente a block.
Una vez elegido uno de estos dos valores, y establecida la propiedad display al
elemento contenedor, hay varias formas de configurar nuestra cuadrícula grid.
Comencemos con las propiedades que se aplican al elemento contenedor (padre).
1.1 Grid con filas y columnas
Es posible crear cuadrículas con un tamaño explícito. Para ello, sólo tenemos que
usar las propiedades CSS grid-template-columns y grid-template-rows, que sirven
para indicar las dimensiones de cada celda de la cuadrícula, diferenciando entre
columnas y filas. Las propiedades son las siguientes:
Conociendo estas dos propiedades, asumamos el siguiente código CSS:
[Escriba aquí]
GUIA DE CSS GRID (PROGRAMACION WEB) PEDRO SAMPER IBAÑEZ
Esto significa que tendremos una cuadricula con 2 columnas (la primera con 50px
de ancho y la segunda con 300px de ancho) y con 2 filas (la primera con 200px
de alto y la segunda con 75px de alto). Ahora, dependiendo del número de ítems
(elementos hijos) que tenga el contenedor grid, tendremos una cuadrícula de 2x2
elementos (4 ítems), 2x3 elementos (6 ítems), 2x4 elementos (8 ítems) y así
sucesivamente. Si el número de ítems es impar, la última celda de la cuadrícula se
quedará vacía.
[Escriba aquí]
GUIA DE CSS GRID (PROGRAMACION WEB) PEDRO SAMPER IBAÑEZ
1.2 fr: Unidad fracción restante
En este ejemplo he utilizado píxels como unidades de las celdas de la cuadrícula,
sin embargo, también podemos utilizar otras unidades (e incluso combinarlas)
como porcentajes, la palabra clave auto (que obtiene el tamaño restante) o la
unidad especial fr (fraction), que simboliza una fracción de espacio restante en
el grid. Veamos un código de ejemplo en acción:
Este nuevo ejemplo, se crea una cuadrícula de 2x2, donde el tamaño de ancho de
la cuadrícula se divide en dos columnas (mismo tamaño de ancho para cada
una), y el tamaño de alto de la cuadrícula se divide en dos filas, donde la primera
ocupará el doble (2 fr) que la segunda (1 fr):
De esta forma, podemos tener un mejor control del espacio restante de la
cuadrícula, y como utilizarlo
[Escriba aquí]
GUIA DE CSS GRID (PROGRAMACION WEB) PEDRO SAMPER IBAÑEZ
Nota: Se pueden combinar varias unidades diferentes, pudiendo utilizar píxeles
(px) y fracciones restantes (fr), porcentajes (%) y fracciones restantes (fr) o
combinaciónes similares.
1.3 Filas y columnas repetitivas
En algunos casos, en las propiedades grid-template-columns y grid-template-rows
podemos necesitar indicar las mismas cantidades un número alto de veces,
resultando repetitivo y molesto. Se puede utilizar la expresión repeat() para indicar
repetición de valores, indicando el número de veces que se repiten y el tamaño en
cuestión.
La expresión a utilizar sería la siguiente: repeat([núm de veces], [valor o valores]):
Asumiendo que tuvieramos un contenedor grid con 8 ítems hijos (o más), el
ejemplo anterior crearía una cuadrícula con 4 columnas (la primera de 100px de
ancho, la segunda y tercera de 50px de ancho y la cuarta de 200px de ancho). Por
otro lado, tendría 2 filas (la primera de 50px de alto, y la segunda de 100px de
alto). En el caso de tener más ítems hijos, el patrón se seguiría repitiendo.
El ejemplo anterior sería equivalente al código CSS siguiente:
1.4 Grid por áreas
Mediante los grids CSS es posible indicar el nombre y posición concreta de cada
área de una cuadrícula. Para ello utilizaremos la propiedad grid-template-areas,
donde debemos especificar el orden de las áreas en la cuadrícula. Posteriormente,
en cada ítem hijo, utilizamos la propiedad grid-area para indicar el nombre del área
del que se trata:
[Escriba aquí]
GUIA DE CSS GRID (PROGRAMACION WEB) PEDRO SAMPER IBAÑEZ
Propiedad Descripción
grid-template- Indica la disposición de las áreas en el grid. Cada texto entre
areas comillas simboliza una fila.
grid-area Indica el nombre del área. Se usa sobre ítems hijos del grid.
De esta forma, es muy sencillo crear una cuadrícula altamente personalizada en
apenas unas cuantas líneas de CSS, con mucha flexibilidad en la disposición y
posición de cada área:
Aplicando este código, conseguiríamos una cuadrícula donde:
El Item 1, la cabecera (head), ocuparía toda la parte superior.
El Item 2, el menú (menu), ocuparía el área izquierda del grid, debajo de la
cabecera.
El Item 3, el contenido (main), ocuparía el área derecha del grid, debajo de
la cabecera.
El Item 4, el pie de cuadrícula (foot), ocuparía toda la zona inferior del grid.
[Escriba aquí]
GUIA DE CSS GRID (PROGRAMACION WEB) PEDRO SAMPER IBAÑEZ
OJO: Ten en cuenta añadir contenido de texto en cada celda del grid, para que
Grid CSS detecte que esa celda no está vacía.
En la propiedad grid-template-areas, en lugar de indicar el nombre del área a
colocar, también podemos indicar una palabra clave especial:
La palabra clave none: Indica que no se colocará ninguna celda en esta
posición.
Uno o más puntos (.): Indica que se colocará una celda vacía en esta
posición.
1.5 Grid con huecos
Por defecto, la cuadrícula tiene todas sus celdas pegadas a sus celdas contiguas.
Aunque sería posible darle un margin a las celdas dentro del contenedor, existe
una forma más apropiada, que evita los problemas clásicos de los modelos de
caja: los huecos (gutters).
Para especificar los huecos (espacio entre celdas) podemos utilizar las
propiedades grid-column-gap y/o grid-row-gap. En ellas indicaremos el tamaño de
dichos huecos:
Propiedad Descripción
grid-column- Establece el Tamaño de los huecos entre columnas (líneas
[Escriba aquí]
GUIA DE CSS GRID (PROGRAMACION WEB) PEDRO SAMPER IBAÑEZ
Propiedad Descripción
gap verticales).
Establece el Tamaño de los huecos entre filas (líneas
grid-row-gap
horizontales).
Tomemos el ejemplo anterior como base. En él, le indicamos estas propiedades
para colocar huecos entre las celdas de la cuadrícula. El código a añadir al
ejemplo anterior sería el siguiente:
Con esto, obtendríamos un resultado como el siguiente, indicando huecos entre
columnas de 100px y huecos entre filas de 10px:
[Escriba aquí]
GUIA DE CSS GRID (PROGRAMACION WEB) PEDRO SAMPER IBAÑEZ
1.6 Atajo: Grid con huecos
Existe una propiedad de atajo para las propiedades grid-column-gap y grid-row-
gap, permitiéndonos la posibilidad de no tener que indicarlas por separado.
La propiedad en cuestión sería grid-gap y se utilizaría de la siguiente forma:
1.7 Posición en el grid
Existen una serie de propiedades que se pueden utilizar para colocar los ítems
dentro de la cuadrícula. Con ellas podemos distribuir los elementos de una forma
muy sencilla y cómoda. Dichas propiedades son justify-items y align-items, que ya
conocerás del módulo CSS flexbox:
Propiedad Valores Descripción
start | end | center | Distribuye los elementos en el eje
justify-items
stretch horizontal.
start | end | center |
align-items Distribuye los elementos en el eje vertical.
stretch
Estas propiedades se aplican sobre el elemento contenedor padre, pero afectan a
los ítems hijos, por lo que actuan sobre la distribución de cada uno de los hijos. En
el caso de que queramos que uno de los ítems hijos tengan una distribución
diferente al resto, aplicamos la propiedad justify-self o align-self sobre el ítem hijo
en cuestión, sobreescribiendo su distribución.
Estas propiedades funcionan exactamente igual que sus análogas justify-items o
align-items, sólo que en lugar de indicarse en el elemento padre contenedor, se
hace sobre un elemento hijo. Las propiedades sobre ítems hijos las veremos más
adelante.
[Escriba aquí]
GUIA DE CSS GRID (PROGRAMACION WEB) PEDRO SAMPER IBAÑEZ
También podemos utilizar las propiedades justify-content o align-content para
modificar la distribución de todo el contenido en su conjunto, y no sólo de los ítems
por separado:
Propiedad Valores
start | end | center | stretch | space-around | space-between | space-
justify-content
evenly
start | end | center | stretch | space-around | space-between | space-
align-content
evenly
De esta forma, podemos controlar prácticamente todos los aspectos de
posicionamiento de la cuadrícula directamente desde los estilos CSS de su
contenedor padre:
[Escriba aquí]
GUIA DE CSS GRID (PROGRAMACION WEB) PEDRO SAMPER IBAÑEZ
1.8 Ajuste automático de celdas
Es posible utilizar las propiedades grid-auto-columns y grid-auto-rows para darle
un tamaño automático a las celdas de la cuadrícula. Para ello, sólo hay que
especificar el tamaño deseado en cada una de las propiedades. Además, también
podemos utilizar grid-auto-flow para indicar el flujo de elementos en la cuadrícula,
y especificar por donde se irán añadiendo. Las propiedades son las siguientes:
Propiedad Valores Descripción
grid-auto- Indica el tamaño automático de ancho que
Tamaño
columns tendrán las columnas.
Indica el tamaño automático de alto que tendrán
grid-auto-rows Tamaño
las filas.
row | column | Utiliza un algoritmo de autocolocación (intenta
grid-auto-flow
dense rellenar huecos).
Un ejemplo de como se insertarían los elementos en una cuadrícula de 2x2
utilizando grid-auto-flow por columnas o por filas:
[Escriba aquí]
GUIA DE CSS GRID (PROGRAMACION WEB) PEDRO SAMPER IBAÑEZ
1.9 Atajo: Grid
Por último, existe una propiedad grid que sirve de atajo para la mayoría de
propiedades CSS relativas a cuadrículas. Su esquema de utilización sería el
siguiente, junto a algunos ejemplos:
1.10 Propiedades para ítems hijos
Hasta ahora, salvo algunas excepciones como justify-self, align-self o grid-area,
hemos visto propiedades CSS que se aplican solamente al contenedor padre de
una cuadrícula. A continuación, vamos a ver ciertas propiedades que en su lugar,
se aplican a cada ítem hijo de la cuadrícula, para alterar o cambiar el
comportamiento específico de dicho elemento, que no se comporta como la
mayoría.
Algunas de las propiedades vistas hasta ahora son las siguientes:
Propiedad Descripción
justify-self Altera la justificación del ítem hijo en el eje horizontal.
align-self Altera la alineación del ítem hijo en el eje vertical.
Indica un nombre al área especificada, para su utilización con grid-
grid-area
template-areas.
Sin embargo, existen algunas propiedades más, referentes en este caso, a la
posición de los hijos de la cuadrícula donde va a comenzar o terminar una fila o
columna. Las propiedades son las siguientes:
Propiedad Descripción
grid-column-start Indica en que columna empezará el ítem de la cuadrícula.
grid-column-end Indica en que columna terminará el ítem de la cuadrícula.
[Escriba aquí]
GUIA DE CSS GRID (PROGRAMACION WEB) PEDRO SAMPER IBAÑEZ
Propiedad Descripción
grid-row-start Indica en que fila empezará el ítem de la cuadrícula.
grid-row-end Indica en que fila terminará el ítem de la cuadrícula.
Con dichas propiedades, podemos indicar el siguiente código CSS sobre el primer
ítem de una cuadrícula de 4 ítems:
De esta forma, tenemos una cuadrícula de 4 elementos, en el que indicamos la
posición del ítem 1 (elemento HTML con clase .a): comenzando en la columna 1 y
acabando en el inicio de la columna 2:
Ese sería el funcionamiento normal. Donde se ve la utilidad de estas propiedades,
es si variamos los valores de forma que tomen posiciones diferentes, como por
ejemplo, si indicamos que el ítem 1 debe comenzar en la columna 1, pero acabar
en la columna 3 (ocupando la hipotética primera y segunda celda):
[Escriba aquí]
GUIA DE CSS GRID (PROGRAMACION WEB) PEDRO SAMPER IBAÑEZ
En este nuevo ejemplo, comenzamos el primer ítem en la columna 2 y lo
acabamos al principio de la columna 3, por lo que la celda permanecerá en la
posición de la segunda columna. Además, añadimos la propiedad grid-row-start
que hace lo mismo que hasta ahora, pero con las filas. En este caso, le indicamos
que comience en la fila 3, por lo que el ítem 1 se desplaza a una nueva fila de la
cuadrícula, dejando en la anterior el ítem 4:
También es posible utilizar la palabra clave span seguida de un número, que
indica que abarque hasta esa columna o celda.
[Escriba aquí]
GUIA DE CSS GRID (PROGRAMACION WEB) PEDRO SAMPER IBAÑEZ
1.11 Atajo: grid-column y grid-row
El módulo grid de CSS proporciona las propiedades de atajo grid-column y grid-
row donde se nos permite escribir en un formato abreviado las propiedades
anteriores. Su sintaxis sería la siguiente:
La especificación de Grid CSS ya tiene buen soporte en la actualidad y puede
utilizarse en producción. Eso sí, si requieres soporte para navegadores antiguos,
sé cuidadoso. Actualmente, su soporte es el siguiente:
[Escriba aquí]
GUIA DE CSS GRID (PROGRAMACION WEB) PEDRO SAMPER IBAÑEZ
2. REFERENCIA BIBLIOGRAFICAS.
Para inquietudes de grid.
Favor ingresar al siguiente link:
https://www.w3schools.com/css/css_grid.asp
3. TRABAJO COLABORATIVO
Herramientas visual estudio code. https://code.visualstudio.com/
App-server https://www.appserv.org/en/-
3.1 lea cuidadosamente la guía.
Construir la maquetación de nuestra página proyecto.
3.2 Entrega de producto comprimido con los
archivos html y css.
[Escriba aquí]
