Introducción al CSS Grid

CSS Grid

Diseño de cuadrícula (Grid Layout)

El módulo de diseño de cuadrícula de CSS ofrece un sistema de diseño basado en cuadrículas, con filas y columnas, lo que facilita el diseño de páginas web sin tener que usar flotadores y posiciones.

Elementos Grid

Un diseño de cuadrícula (grid) consta de un elemento principal, con uno o más elementos secundarios.

Ejm

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

Este sería el resultado

Ejm

Esta es la sintaxis completa del ejm de arriba.

<!DOCTYPE html>
<html lang="es">
<head>
<style>
.grid-container {
	display: grid;
	grid-template-columns: auto auto auto;
	background-color: #2196f3;
	padding: 10px;
}

.grid-item {
	background-color: rgba(255, 255, 255, 0.8);
	border: 1px solid rgba(0, 0, 0, 0.8);
	padding: 20px;
	font-size: 30px;
	text-align: center;
}
</style>
</head>
<body>
<h1>Elementos Grid</h1>
<p>Un diseño de cuadrícula (Grid) debe tener un elemento principal con la propiedad 
<em>display</em> establecida en <em>grid</em> o <em>inline-grid</em></p>
<p>Los elementos secundarios directos del contenedor de cuadrícula 
se convierten automáticamente en elementos de cuadrícula.</p>

<div class="grid-container">
	<div class="grid-item">1</div>
	<div class="grid-item">2</div>
	<div class="grid-item">3</div>
	<div class="grid-item">4</div>
	<div class="grid-item">5</div>
	<div class="grid-item">6</div>
	<div class="grid-item">7</div>
	<div class="grid-item">8</div>
	<div class="grid-item">9</div>	
</div>
</body>
</html>

La propiedad Display

Un elemento HTML se convierte en un contenedor de cuadrícula cuando la propiedad display se establece en grid o inline-grid.

Ejm con display: grid

.grid-container {
  display: grid;
}

Ejm con display: inline-grid

.grid-container {
  display: inline-grid;
}

Todos los elementos secundarios directos del contenedor de cuadrícula se convierten automáticamente en elementos de cuadrícula.

Columnas Grid

Las líneas verticales de los elementos de la cuadrícula se denominan columnas.

Filas Grid

Las líneas horizontales de los elementos de la cuadrícula se denominan filas.

Huecos de rejilla (espacios)

Los espacios entre cada columna/fila se denominan espacios.

Puedes ajustar el tamaño del espacio usando una de las siguientes propiedades:

  • column-gap
  • row-gap
  • gap

Ejm 1

La propiedad column-gap establece el espacio entre las columnas.

.grid-container {
  display: grid;
  column-gap: 50px;
}

Ejm 2

La propiedad row-gap establece el espacio entre las filas.

.grid-container {
  display: grid;
  row-gap: 50px;
}

Ejm 3

La propiedad gap es una propiedad abreviada para las propiedades row-gap  y  column-gap.

.grid-container {
  display: grid;
  gap: 50px 100px;
}

La propiedad gap también se puede usar para establecer tanto el espacio entre filas como el espacio entre columnas en un valor.

Ejm

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
gap: 50px;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}

.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>

<h1>The gap Property:</h1>

<p>Use the <em>gap</em> shorthand property to adjust the space between 
the columns and rows:</p>

<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div> 
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div> 
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div> 
</div>

</body>
</html>

Líneas Grid

Las líneas entre columnas se llaman líneas de columna. Las líneas entre filas se llaman líneas de fila.

Consulta los números de línea cuando coloques un elemento de cuadrícula en un contenedor de cuadrícula:

Ejm

<!DOCTYPE html>
<html lang="es">
<head>
<style>
.grid-container {
	display: grid;
	grid-template-columns: auto auto auto;
	gap: 10px;
	background-color: #2196f3;
	padding: 10px;
}

.grid-container > div {
	background-color: rgba(255, 255, 255, 0.8);
	text-align: center;
	padding: 20px 0;
	font-size: 30px;
}

.item1 {
	grid-column-start: 1;
	grid-column-end: 3;
}

</style>
</head>
<body>
<h1>Items Grid</h1>

<div class="grid-container">
	<div class="item1">1</div>
	<div class="item2">2</div>
	<div class="item3">3</div>
	<div class="item4">4</div>
	<div class="item5">5</div>
	<div class="item6">6</div>
	<div class="item7">7</div>
	<div class="item8">8</div>
</div>
</body>
</html>

El resultado sería

Ejm

Coloque un elemento de cuadrícula en la línea de fila 1 y deje que termine en la línea de fila 3:

<!DOCTYPE html>
<html lang="es">
<head>
<style>
.grid-container {
	display: grid;
	grid-template-columns: auto auto auto;
	gap: 10px;
	background-color: #2196f3;
	padding: 10px;
}

.grid-container > div {
	background-color: rgba(255, 255, 255, 0.8);
	text-align: center;
	padding: 20px 0;
	font-size: 30px;
}

.item1 {
	grid-row-start: 1;
	grid-row-end: 3;
}

</style>
</head>
<body>
<h1>Items Grid</h1>

<div class="grid-container">
	<div class="item1">1</div>
	<div class="item2">2</div>
	<div class="item3">3</div>
	<div class="item4">4</div>
	<div class="item5">5</div>
	<div class="item6">6</div>
	<div class="item7">7</div>
	<div class="item8">8</div>
</div>
</body>
</html>

El resultado sería

Resumen

Propiedad Descripción
column-gap Especifica el espacio entre las columnas.
gap Una propiedad abreviada para las propiedades row-gap y column-gap
grid Una propiedad abreviada para las propiedades grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns y grid-auto-flow
grid-area Especifica un nombre para el elemento de la cuadrícula.
grid-auto-columns Especifica un tamaño de columna predeterminado
grid-auto-flow Especifica cómo se insertan en la cuadrícula los elementos colocados automáticamente
grid-auto-rows Especifica un tamaño de fila predeterminado
grid-column Una propiedad abreviada para las propiedades grid-column-start y grid-column-end
grid-column-end Especifica dónde terminar el elemento de la cuadrícula.
grid-column-gap Especifica el tamaño del espacio entre columnas.
grid-column-start Especifica dónde comenzar el elemento de la cuadrícula.
grid-gap Una propiedad abreviada para las propiedades grid-row-gap y grid-column-gap 
grid-row Una propiedad abreviada para las propiedades grid-row-start y grid-row-end
grid-row-end Especifica dónde terminar el elemento de la cuadrícula.
grid-row-gap Especifica el tamaño del espacio entre filas
grid-row-start Especifica dónde comenzar el elemento de la cuadrícula.
grid-template Una propiedad abreviada para las propiedades grid-template-rows, grid-template-columns y grid-areas
grid-template-areas Especifica cómo mostrar columnas y filas, utilizando elementos de cuadrícula con nombre
grid-template-columns Especifica el tamaño de las columnas y cuántas columnas en un diseño de cuadrícula
grid-template-rows Especifica el tamaño de las filas en un diseño de cuadrícula
row-gap Especifica el espacio entre las filas de la cuadrícula.