6.1 Propiedad grid-gap
CSS Grid Layout ofrece herramientas flexibles para manejar el espacio entre los elementos de la cuadrícula. Las propiedades
grid-gap, grid-row-gap y grid-column-gap te permiten definir fácilmente la distancia
entre filas y columnas, lo que te ayuda a crear diseños ordenados y organizados. Vamos a ver estas propiedades más a fondo.
La propiedad grid-gap (abreviada gap) define la distancia general entre las filas y columnas en la cuadrícula.
Esta propiedad es una forma abreviada de escribir grid-row-gap y grid-column-gap.
Sintaxis:
.grid-container {
grid-gap: value;
}
Donde:
-
value: el valor del espacio entre filas y columnas. Puede especificarse en varias unidades de medida (px,%,fr,auto, etc.)
Ejemplo 1: Valor único para filas y columnas
En este ejemplo, un espacio de 20px se aplicará tanto a las filas como a las columnas:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-gap: 20px; /* Espacio de 20px entre todas las filas y columnas */
}
Ejemplo 2: Diferentes valores para filas y columnas
En este ejemplo se utilizan dos valores: el primero (10px) para las filas, el segundo (20px) para las columnas:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-gap: 10px 20px; /* 10px entre filas, 20px entre columnas */
}
6.2 Propiedad grid-row-gap
La propiedad grid-row-gap define la distancia entre las filas en la cuadrícula. Esto te permite establecer
un valor separado para el espacio entre filas, independientemente de las columnas.
Sintaxis:
.grid-container {
grid-row-gap: value;
}
Donde:
value: el valor del espacio entre filas. Puede especificarse en varias unidades de medida
Ejemplo 1: Establecer un espacio fijo entre filas
En este ejemplo, la distancia entre las filas será 15px:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-row-gap: 15px; /* Espacio de 15px entre filas */
}
Ejemplo 2: Usar porcentaje para definir el espacio
En este ejemplo, la distancia entre las filas será 5% de la altura de la fila:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-row-gap: 5%; /* Espacio del 5% de la altura de la fila */
}
6.3 Propiedad grid-column-gap
La propiedad grid-column-gap define la distancia entre las columnas en la cuadrícula. Esto te permite
establecer un valor separado para el espacio entre columnas, independientemente de las filas.
Sintaxis:
.grid-container {
grid-column-gap: value;
}
Donde:
value: el valor del espacio entre columnas. Puede especificarse en varias unidades de medida
Ejemplo 1: Establecer un espacio fijo entre columnas
En este ejemplo, la distancia entre las columnas será 25px:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-column-gap: 25px; /* Espacio de 25px entre columnas */
}
Ejemplo 2: Usar em para definir el espacio
En este ejemplo, la distancia entre las columnas será 2em:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-column-gap: 2em; /* Espacio de 2em entre columnas */
}
6.4 Uso combinado de grid-row-gap y grid-column-gap
Puedes combinar las propiedades grid-row-gap y grid-column-gap para controlar más
precisamente los espacios entre filas y columnas.
Ejemplo de implementación completa:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Tres columnas de igual ancho */
grid-template-rows: repeat(3, 100px); /* Tres filas de altura fija */
grid-row-gap: 15px; /* Espacio de 15px entre filas */
grid-column-gap: 25px; /* Espacio de 25px entre columnas */
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
border: 1px solid #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de uso de grid-gap, grid-row-gap y grid-column-gap</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item item1">Elemento 1</div>
<div class="grid-item item2">Elemento 2</div>
<div class="grid-item item3">Elemento 3</div>
<div class="grid-item item4">Elemento 4</div>
<div class="grid-item item5">Elemento 5</div>
<div class="grid-item item6">Elemento 6</div>
</div>
</body>
</html>
Explicación del código:
-
.grid-container: crea un contenedor de Grid con tres columnas de igual ancho y tres filas de altura fija. Utiliza las propiedadesgrid-row-gapygrid-column-gappara establecer los espacios entre filas y columnas. -
.grid-item: define estilos básicos para los elementos de la cuadrícula, como el color de fondo, el color del texto, el relleno, la alineación del texto y el borde.
GO TO FULL VERSION