Lección 5: Grid
Antes de entrar en los estilos debemos comprender como se maqueta usando Grids de CSS.
Imaginemos un tablero de ajedrez.
Podría marcar como quiero colocar la estructura de mis divs.
Ahora lo implemento en HTML/CSS partiendo de Grid.
<html>
<head>
<!-- CSS -->
<style>
#tablero {
display: grid;
grid-template-columns: 300px 500px;
grid-template-rows: 200px 100px 500px;
width: 800px;
height: 800px;
}
#azul {
background-color: blue;
grid-column: 2 / 3;
grid-row: 2 / 3;
}
#amarillo {
background-color: yellow;
grid-column: 1 / 2;
grid-row: 1 / 4;
}
#rojo {
background-color: red;
grid-column: 2 / 3;
grid-row: 1 / 2;
}
#verde {
background-color: green;
grid-column: 2 / 3;
grid-row: 3 / 4;
}
</style>
</head>
<body>
<!-- HTML -->
<div id="tablero">
<div id="azul"></div>
<div id="amarillo"></div>
<div id="rojo"></div>
<div id="verde"></div>
</div>
</body>
</html>
El resultado sería prácticamente igual:
Más adelante explicaré de forma sencilla como llegar a cada elemento. Ahora solo quiero que veáis que con muy pocas líneas de CSS, y sin alterar la estructura del HTML, hemos conseguido estructurar a nuestro gusto y sin limitaciones aparentes.
Veamos poco a poco como funciona.
Conceptos básicos
Para empezar debemos tener claro que existen dos partes bien diferenciadas: un padre y sus hijos. El padre será el tablero o la etiqueta que envuelva todo. Llevará el estilo display: grid. Y los hijos son los contenedores o elementos que queremos posicionar dentro de nuestro tablero. Si has trabajado con flex notarás que el funcionamiento es clónico.
Un ejemplo.
<html>
<head>
<!-- CSS -->
<style>
#tablero {
display: grid;
width: 800px;
height: 800px;
}
#azul {
background-color: blue;
}
#amarillo {
background-color: yellow;
}
#rojo {
background-color: red;
}
#verde {
background-color: green;
}
</style>
</head>
<body>
<!-- HTML -->
<div id="tablero">
<div id="azul"></div>
<div id="amarillo"></div>
<div id="rojo"></div>
<div id="verde"></div>
</div>
</body>
</html>
De acuerdo, tal vez te sientes decepcionado. ¡Paciencia! Aún tenemos que indicar a cada hijo donde debe colocarse :)
El padre va a indicar cual va a ser el número de filas y columnas que va a tener nuestro tablero. Incluso va a decir cuanto va a medir cada una.
Si quisiera una estructura de 2x2. O lo que es lo mismo, si partimos de que nuestro tablero mide 800px por 800px: 2 columnas de 400px y 2 filas de 400px.
<html>
<head>
<!-- CSS -->
<style>
#tablero {
display: grid;
// Columnas
grid-template-columns: 400px 400px;
// Filas
grid-template-rows: 400px 400px;
width: 800px;
height: 800px;
}
#azul {
background-color: blue;
}
#amarillo {
background-color: yellow;
}
#rojo {
background-color: red;
}
#verde {
background-color: green;
}
</style>
</head>
<body>
<!-- HTML -->
<div id="tablero">
<div id="azul"></div>
<div id="amarillo"></div>
<div id="rojo"></div>
<div id="verde"></div>
</div>
</body>
</html>
Sencillo, ¿no?
Por supuesto puedo cambiar los tamaños.
<html>
<head>
<!-- CSS -->
<style>
#tablero {
display: grid;
// Columnas
grid-template-columns: 100px 700px;
// Filas
grid-template-rows: 500px 300px;
width: 800px;
height: 800px;
}
#azul {
background-color: blue;
}
#amarillo {
background-color: yellow;
}
#rojo {
background-color: red;
}
#verde {
background-color: green;
}
</style>
</head>
<body>
<!-- HTML -->
<div id="tablero">
<div id="azul"></div>
<div id="amarillo"></div>
<div id="rojo"></div>
<div id="verde"></div>
</div>
</body>
</html>
Posicionando los hijos
En esta ocasión vamos a colocar cada hijo donde nosotros queramos. Partimos de un tablero de 3x3.
Nuestro objetivo final será colocar 5 elementos con esta estructura.
Preparamos nuestro código.
<html>
<head>
<!-- CSS -->
<style>
#tablero {
display: grid;
grid-template-columns: 300px 300px 300px;
grid-template-rows: 300px 300px 300px;
width: 900px;
height: 900px;
}
#azul {
background-color: blue;
}
#amarillo {
background-color: yellow;
}
#rojo {
background-color: red;
}
#verde {
background-color: green;
}
#rosa {
background-color: pink;
}
</style>
</head>
<body>
<!-- HTML -->
<div id="tablero">
<div id="azul"></div>
<div id="amarillo"></div>
<div id="rojo"></div>
<div id="verde"></div>
<div id="rosa"></div>
</div>
</body>
</html>
Cada hijo debe ser posicionado en un inicio y un final de columna y fila. Nuestro tablero tiene las siguientes líneas.
Empezamos con el hijo amarillo. Ocupa el área entre la columna 1 y la columna 2.
#amarillo {
background-color: yellow;
grid-column-start: 1;
grid-column-end: 2;
}
Y de la fila 1 a la fila 4.
#amarillo {
background-color: yellow;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 4;
}
Una versión resumida de lo anterior.
#amarillo {
background-color: yellow;
grid-column: 1 / 2;
grid-row: 1 / 4;
}
Aplicando la misma técnica se quedaría el ejemplo de la siguiente forma.
<html>
<head>
<!-- CSS -->
<style>
#tablero {
display: grid;
grid-template-columns: 300px 300px 300px;
grid-template-rows: 300px 300px 300px;
width: 900px;
height: 900px;
}
#azul {
background-color: blue;
grid-column: 2 / 4;
grid-row: 3 / 4;
}
#amarillo {
background-color: yellow;
grid-column: 1 / 2;
grid-row: 1 / 4;
}
#rojo {
background-color: red;
grid-column: 2 / 3;
grid-row: 1 / 3;
}
#verde {
background-color: green;
grid-column: 3 / 4;
grid-row: 1 / 2;
}
#rosa {
background-color: pink;
grid-column: 3 / 4;
grid-row: 2 / 3;
}
</style>
</head>
<body>
<!-- HTML -->
<div id="tablero">
<div id="azul"></div>
<div id="amarillo"></div>
<div id="rojo"></div>
<div id="verde"></div>
<div id="rosa"></div>
</div>
</body>
</html>
grid-template-columns
Define el número de columnas y su tamaño.
Fijo
.cuadricula {
display: grid;
grid-template-columns: 10rem 10rem;
}
Fracciones
Reparte el espacio disponible.
.cuadricula {
display: grid;
/* 50% y 50% */
grid-template-columns: 1fr 1fr;
/* 75% y 25% */
grid-template-columns: 3fr 1fr;
/* todo el espacio diponible + 10rem */
grid-template-columns: 1fr 10rem;
}
Mínimo y máximo
Define una medida mínima y máxima.
.cuadricula {
display: grid;
/* Entre 20rem y 30rem */
grid-template-columns: minmax(20rem, 30rem);
/* Entre 20rem y 100% */
grid-template-columns: minmax(20rem, 1fr);
}
Repeat
Repite una medida un número de ocasiones.
.cuadricula {
display: grid;
grid-template-columns: repeat(3, 10rem);
}
grid-row-start/grid-row-end/grid-row
Define en que fila empezará y terminará dentro de la cuadrícula.
.elemento {
grid-row-start: 1;
grid-row-end: 2;
}
Una forma abreviada es usando grid-row.
.elemento {
grid-row: 1 / 2;
}
grid-column-start/grid-column-end
Define en que columna empezará y terminará dentro de la cuadrícula.
.elemento {
grid-column-start: 1;
grid-column-end: 2;
}
Una forma abreviada es usando grid-column.
.elemento {
grid-column: 1 / 2;
}
grid-row-gap
Añade espacio entre las filas.
.cuadricula {
grid-row-gap: 2rem;
}
grid-column-gap
Añade espacio entre las columnas.
.cuadricula {
grid-column-gap: 2rem;
}
gap
Añade espacio entre las columnas y las filas. Ya lo estuvimos usando con Flex.
.cuadricula {
gap: 2rem;
}
grid-template-rows
Define el número de filas y su tamaño. Comparte las mismas medidas de grid-template-columns.
.cuadricula {
display: grid;
grid-template-rows: 1fr 1fr;
}
grid-template-areas y grid-area
Estructura la cuadrícula usando alias.
.cuadricula {
display: grid;
grid-template-areas: "header header"
"nav main"
"footer footer";
}
.cabecera {
grid-area: header;
}
.menu {
grid-area: nav;
}
.contenido {
grid-area: main;
}
.pie {
grid-area: footer;
}
grid-auto-flow
Automáticamente posiciona los elementos en los espacios que pueden entrar, siguiendo su orden o no.
Orden horizontal
.cuadricula {
display: grid;
grid-auto-flow: row;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 10rem);
gap: 1rem;
}
.elemento {
border: 5px solid #d66853;
background-color: #f7b143;
color: white;
font-size: 3rem;
display: flex;
justify-content: center;
align-items: center;
}
.elemento-ancho {
grid-column: auto / span 2;
}
<section class="cuadricula">
<article class="elemento">1</article>
<article class="elemento">2</article>
<article class="elemento elemento-ancho">3</article>
<article class="elemento">4</article>
<article class="elemento">5</article>
<article class="elemento elemento-ancho">6</article>
</section>
Orden vertical
.cuadricula {
display: grid;
grid-auto-flow: column;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 10rem);
gap: 1rem;
}
.elemento {
border: 5px solid #d66853;
background-color: #f7b143;
color: white;
font-size: 3rem;
display: flex;
justify-content: center;
align-items: center;
}
.elemento-ancho {
grid-column: auto / span 2;
}
<section class="cuadricula">
<article class="elemento">1</article>
<article class="elemento">2</article>
<article class="elemento elemento-ancho">3</article>
<article class="elemento">4</article>
<article class="elemento">5</article>
<article class="elemento elemento-ancho">6</article>
</section>
Sin orden, prima condensar
.cuadricula {
display: grid;
grid-auto-flow: row dense;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 10rem);
gap: 1rem;
}
.elemento {
border: 5px solid #d66853;
background-color: #f7b143;
color: white;
font-size: 3rem;
display: flex;
justify-content: center;
align-items: center;
}
.elemento-ancho {
grid-column: auto / span 2;
}
<section class="cuadricula">
<article class="elemento">1</article>
<article class="elemento">2</article>
<article class="elemento elemento-ancho">3</article>
<article class="elemento">4</article>
<article class="elemento">5</article>
<article class="elemento elemento-ancho">6</article>
</section>
Actividad 1
A partir de la siguiente imagen, maqueta usando Grid.
Actividad 2
A partir de la siguiente imagen, maqueta usando Grid.
Actividad 3
A partir de la siguiente imagen, maqueta usando Grid.
Actividad 4
A partir de la siguiente imagen, maqueta usando Grid.
Actividad 5
A partir de la siguiente imagen, maqueta usando Grid enfocado a smartphone (menos de 500px de ancho.
Actividad 6
A partir de la siguiente imagen, maqueta usando Grid.
Actividad 7
A partir de la siguiente imagen, maqueta usando Grid.
Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.
¿Me ayudas?
No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.
- 1 café: Se mantiene el dominio durante 4 meses.
- 2 cafés: Se liquida 1 mes del Servidor Web.
- 3 cafés: Se paga 1 mes de Newsletter.
Comentarios
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ comments.length }} comentarios