Maqueta Webs Profesionales

CSS Grid
Índice de
contenidos
1 Qué es CSS Grid
-
5 Propiedades relacionadas
con los hijos de la grilla
Página 3 -
Página 14

2 Soporte de los navegadores para

CSS Grid
-
6 Ordenar los elementos de la grilla
-
Página 5 Página 16

3 ¿CSS Grid o lexbox?

-
7 Ejemplo práctico: Maquetando la red
social de alumnos de OpenWebinars
Página 7 -
Página 18

4 Propiedades que afectan a la grilla

-
Página 9
8 Conclusiones finales
-
Página 23
1 Qué es CSS Grid

CSS Grid es una tecnología

propia de CSS que nos permite
estructurar nuestro contenido
asimilando que este es una grilla,
es decir, un espacio formado por
columnas y filas.
Este espacio que construiremos con columnas y filas nos
permitirá organizar nuestro contenido de una manera
más rápida y sencilla. Por tanto, construir y organizar
elementos que hasta ahora eran más complejos nos
serán muy sencillos.

Página 3
Maqueta Webs Profesionales con
CSS Grid
2 Soporte de los navegadores
para CSS Grid
Actualmente, CSS Grid es soportado ampliamente por
los navegadores, entre los más usados y conocidos
podemos destacar a: Chrome
● Google Chrome que lo soporta completamente desde
su versión 57.

● Firefox, en el que está disponible al completo desde

la versión 52.

● Edge y Safari, desde las versiones 16 y 10.1

respectivamente. Firefox
Si quieres conocer más sobre la compatibilidad de este
sistema de grillas para un navegador muy
concreto puedes ir a este enlace. Irás a CanIUse, un
sitio en el que podrás también buscar tablas de
compatibilidades para casi todo.

Edge

Safari

Página 5
Maqueta Webs Profesionales con
CSS Grid
3 ¿CSS Grid o flexbox?

Flexbox, por si no lo conoces es otro sistema de CSS, ● La manera de estructurar el contenido: Flexbox usa un
que nos permite modelar casi cualquier contenido de contenedor flexible y CSS Grid un espacio de columnas
una manera flexible y casi responsive por defecto. y filas.

La encrucijada llega cuando tenemos que elegir entre ● Flexbox, al ser por defecto flexible nos ahorra mucho
estos dos sistemas, y creo que es importante aprender trabajo en Responsive Design, si revisas el eBook sobre
ambos y hacer ejemplos con ellos ya que aportan Flexbox descubrirás las pocas líneas que necesitamos
soluciones diferentes, y una tecnología estará más para hacer nuestro landing compatible con todos los
recomendada para un caso que para otro. dispositivos. En el caso de CSS Grid, al ser una tecnología
actual y orientada a todos los dispositivos también nos
Flexbox, se diferencia de CSS Grid en diversos aspectos, facilitará este aspecto, pero no tanto.
algunos de ellos son:

CSS Grid Flexbox

Página 7
Maqueta Webs Profesionales con
CSS Grid
4 Propiedades que afectan
a la grilla
grid-template-column Ejemplo de uso de grid-template-row y
grid-template-column
Esta propiedad, como su propio nombre indica nos
permite definir las columnas que va a tener la grilla. Código:

Como veremos ahora en el ejemplo, podemos llegar a .contenedor {

considerar que se realiza de una manera implícita porque grid-template-columns: 40px 50px auto 50px 40px;
no anotamos el número de filas y columnas si no el grid-template-rows: 25% 100px auto;
tamaño. Dependiendo de cuantos tamaños pongamos
así habrá de filas o columnas.

Ejemplo: Tres columnas de 50px cada una y la tercera del

resto del tamaño disponible:

grid-template-column: 50px 50px 1fr;

grid-template-row

Esta propiedad tendrá el mismo funcionamiento que la

anterior. La diferencia consiste en que definirá el número
de filas.

Ejemplo: Dos filas de 20px cada una:

grid-template-row: 20px 20px;

Página 9
Maqueta Webs Profesionales con
CSS Grid

4 Propiedades que afectan

a la grilla
grid-template-areas Resultado visual:

Las áreas es un concepto relacionado con las filas y las

columnas ya que es una manera con la que podremos
definir un espacio rectangular en la grilla.

Es muy interesante ya que por ejemplo, si creamos la

vista de post de un blog con CSS Grid, podremos tener
dos columnas en medio, para albergar el contenido del
post y el sidebar pero para header y footer podrán ocupar
las 2 columnas.

Con esta propiedad definiremos esta estructura

precisamente. El ejemplo descrito anteriormente se
definiría de la siguiente manera:

grid-template-areas:
“Cabecera Cabecera Cabecera Cabecera”
“principal principal . barralateral”
“pie pie pie pie”;

Página 10
4 Propiedades que afectan
a la grilla
grid-template

Esta propiedad es una de las más completas de CSS

Grid. Vamos a ver durante el ebook que hay diferentes
propiedades pero que generalmente se concentran en
una, para ahorrar espacio a la hora de escribir código.

grid-template no es más que la agrupación de las

tres propiedades que hemos descrito anteriormente.

En caso de querer definir únicamente filas y columnas, la

propiedad tendría la siguiente estructura:

grid-template: valores de grid-row / valores de grid-column;

Un ejemplo de uso de:

.contenedor {
grid-template:
[row1-start] “cabecera cabecera cabecera” 25px [row1-end]
[row2-start] “pie pie pie” 25px [row2-end] / auto 50px auto;
}

El anterior código es equivalente a esto:

.container {
grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
grid-template-columns: auto 50px auto;
grid-template-areas:
“cabecera cabecera cabecera”
“pie pie pie”;
}

Página 11
Maqueta Webs Profesionales con
CSS Grid

4 Propiedades que afectan

a la grilla
flex-flow
Esta propiedad combina flex-direction , que nos
indicaba si el contenedor sería una fila o una columna y
flex-wrap que definiría si los elementos podían caer
a una siguiente fila.

Usaremos también esta propiedad en CSS Grid y nos

servirá para definir en el orden que se irán mostrando los
elementos de la grilla (si irán de arriba a abajo y cuando
acaben la columna el siguiente será el primero de la
segunda columna o al revés) y para permitir que caigan
los elementos.

Página 12
Maqueta Webs Profesionales con
CSS Grid

5 Propiedades relacionadas
con los hijos de la grilla
grid-column Ejemplo: Una fila con clase “filita” que acabe en un
espacio anterior:
Esta propiedad nos permitirá definir dónde comienza la
columna o la extensión que puede tener. Es interesante
para cuando queremos hacer la excepción con un solo .filita {
hijo: grid-column: 1 / -1;
}
Ejemplo: Una columna con clase “columnita” que ocupa 5
columnas normales: Ejemplo: Una fila con la clase “filita” que acabe en dos
espacios más(otra manera de hacerlo):
.columnita {
grid-column: 1 / 5; .columnita {
} grid-column: 1 / span 2;
}
Ejemplo: Una columna con clase “columnita” que
comience desde la tercera columna:
grid-area
.columnita {
grid-column: 3; Esta propiedad se la asignaremos a los elementos que
} queramos que estén dentro de un área en concreto.

.header {
grid-row grid-area: header;
}
Con esta propiedad, definiremos la extensión así como
el comienzo o fin de una fila, tal y como en la propiedad
anterior.

Veamos ejemplos diferentes para apreciar la capacidad

de la propiedad:

Página 14
Maqueta Webs Profesionales con
CSS Grid

6 Ordenar los elementos

de la grilla
grid-auto-flow justify-items: start | end | center;

Con esta propiedad podremos definir si el orden de justify-self

los elementos de la grilla será vertical u horizontal.
También contamos con un valor extra, dense, que nos Esta propiedad nos ayudará a alinear el elemento
permitirá ocupar todos los espacios, asignándoles el que específico dentro de su espacio disponible. Podemos
corresponda con su tamaño. hacerlo a la izquierda ( start ) , a la derecha ( end ) o
en el medio ( center ).
grid-auto-flow: row dense;
align-items

justify-content Esta propiedad alineará todos los elementos de la grilla

horizontalmente. Si deseas hacerlo con un sólo elemento
Esta declaración nos ayudará a definir dónde queda el debes usar align-self.
espacio restante a los elementos de la grilla en el caso de
que los hubiera. align-self

Tenemos diferentes opciones: La mencionada propiedad tendrá el mismo uso que

la anterior salvo que la alineación en esta ocasión se
● space-between : Para colocar los elementos en los realizará horizontalmente.
extremos, dejando el espacio entre ellos.
align-content
● space-around : Para colocar el espacio alrededor
de los elementos. Esta propiedad servirá para alinear la grilla al completo
dentro del documento o el espacio que haya disponible.
● space-evenly : Para colocar los elementos con Podremos usar las diferentes propiedades que hemos ido
igual espacio entre ellos. viendo: start, end, center, stretch, space-
around, space-between y space-evenly.
● center : Para colocar los elementos en el centro,
dejando el espacio a los lados. Ejemplo: Alinear la grilla en el horizontalmente en el
centro:

justify-items align-content: center;

Esta propiedad nos servirá para alinear verticalmente

todos los elementos de la grilla dentro de su espacio
disponible. Para aplicarlo a un elemento en específico
debes usar justify-self.
Página 16
Maqueta Webs Profesionales con
CSS Grid

7 Ejemplo práctico:
Maquetando la red social de
alumnos de OpenWebinars

Para finalizar con el aprendizaje sobre CSS Grid vamos a

crear un ejercicio práctico, Open Share, la red social de <body>
alumnos de OpenWebinars. Consistirá en una página en <div class=”grid-space”>
la que dispondremos 5 imágenes de manera diferente, <div class=”grid-item best”>
usando la tecnología que hemos aprendido. </div>
<div class=”grid-item big”>
Maquetando la estructura HTML </div>
<div class=”grid-item photo-3”>
Para ello crearemos una estructura HTML muy básica </div>
que se compondrá de un div con clase grid-space <div class=”grid-item photo-4”>
que contendrá cada grid-item. Las imágenes de </div>
cada elementos las añadiremos como fondo, cuando <div class=”grid-item photo-5”>
estructuremos la grilla. </div>
</div>
Por tanto, nuestra estructura HTML resultaría de la </body>
siguiente manera:

Página 18
7 Ejemplo práctico:
Maquetando la red social de
alumnos de OpenWebinars
Como habrás visto, aplicamos a cada imagen una clase
ya que la grilla tiene ciertas características especiales .grid-space {
como que el primer elemento se dispone a lo largo de display: grid;
la primera fila y el segundo elemento ocupa el doble del grid-template: repeat(2, 50vh) /
resto de elementos de la segunda fila. repeat(5, 20vw);
grid-template-areas: “best_photo best_
Aplicando las diferentes grillas photo best_photo best_photo best_photo”
“big_photo big_
Nuestra grilla, como comentábamos, se compone de photo photo_3 photo_4 photo_5”;
dos filas y cinco columnas. Un elemento clave será la width: 100vw;
definición del grid-template-area para poder }
disponer las imágenes tal y como hemos comentado en .best {
el paso anterior. background: url(‘./img/typing.jpg’);
background-position: center;
background-size: 100%;
grid-area: best_photo;
}
.big {
background: url(‘./img/student_
developing.jpg’);
background-position: center;
grid-area: big_photo;
}
.photo-3 {
background: url(‘./img/student_laptop.
jpg’);
background-position: center;
grid-area: photo_3;
width: 100%;
}

Página 19
Maqueta Webs Profesionales con
CSS Grid

7 Ejemplo práctico:
Maquetando la red social de
alumnos de OpenWebinars
.photo-4 { <img src=”./img/profile/2.jpg”
background: url(‘./img/typing_ />
spreadsheet.jpg’); <h3>Andrea Casas</h3>
background-position: center; </div>
grid-area: photo_4; </div>
width: 100%; </div>
} <div class=”grid-item photo-3”>
.photo-5 { <div class=”photo-info”>
background: url(‘./img/student_surfing. <div class=”photo-info-user”>
jpg’); <img src=”./img/profile/3.jpg”
background-position: center; />
grid-area: photo_5; <h3>Iker Pascual</h3>
width: 100%; </div>
} </div>
</div>
<div class=”grid-item photo-4”>
Añadiendo el componente de <div class=”photo-info”>
información <div class=”photo-info-user”>
<img src=”./img/profile/2.jpg”
Una vez tenemos creada la grilla, vamos a añadir a cada />
elemento una pequeña estructura HTML con la que <h3>Andrea Casas</h3>
crearemos un componente para dar información sobre </div>
cada imagen: </div>
</div>
<div class=”grid-item best”> <div class=”grid-item photo-5”>
<div class=”photo-info”> <div class=”photo-info”>
<div class=”photo-info-user”> <div class=”photo-info-user”>
<img src=”./img/profile/1.jpg” <img src=”./img/profile/3.jpg”
/> />
<h3>Raquel Caballero</h3> <h3>Iker Pascual</h3>
</div> </div>
</div>
</div>
<div class=”grid-item big”>
<div class=”photo-info”>
<div class=”photo-info-user”>

Página 20
7 Ejemplo práctico:
Maquetando la red social de
alumnos de OpenWebinars
</div>
</div> .best .photo-info .photo-info-user {
grid-template-columns: 5% 95%;
.grid-item { }
align-items: end; /* Con este código
estableceremos el componente en el margen .photo-info .photo-info-user h3 {
inferior del componente */ grid-area: info_user_text;
display: grid; }
}
.photo-info .photo-info-user img {
.photo-info { border-radius: 50%;
align-items: center; height: 50px;
background: rgba(255, 255, 224, 0.8); grid-area: info_user_photo;
bottom: 0; max-height: initial;
display: none; width: 50px;
grid-template-areas: “info_user”; }
grid-template-columns: 100%;
}
Como puedes apreciar en el código CSS hemos
.grid-item:hover .photo-info { establecido una grilla también para este componente,
display: grid; donde las dos columnas de la única fila está repartida en
} un 30% y un 70%.

.photo-info .photo-info-user {
align-items: center;
display: grid;
grid-area: info_user;
grid-template-areas: “info_user_photo
info_user_text”;
grid-template-columns: 30% 70%;
margin-left: 1rem;
}

.best .photo-info .photo-info-user {

grid-template-columns: 5% 95%;
}

Página 21
Maqueta Webs Profesionales con
CSS Grid
8 Conclusiones finales

CSS Grid es un sistema para establecer un sitio de

manera muy estructurada. Necesitarás hacer un mayor
uso de media queries que con Flexbox pero son dos
herramientas que pueden servirte dependiendo del sitio
que estés maquetando. Incluso puedes llegar a mezclar
ambas tecnologías para conseguir una estructura super
potente.

Página 23
 ¿Quieres llevar un paso más allá tus
conocimientos en maquetación web?
Aprende a maquetar tu Web de forma fácil
y profesional con Flexbox y CSS grid

Comenzar Curso Ahora

¡Si te ha resultado útil,

comparte en redes sociales!

Más en openwebinars.net