5.1 Propiedad grid-auto-rows
CSS Grid Layout ofrece excelentes herramientas para la colocación automática de elementos en la cuadrícula. Las propiedades
grid-auto-rows, grid-auto-columns y grid-auto-flow ayudan a gestionar
el comportamiento de los elementos que no están colocados explícitamente en la cuadrícula. Vamos a ver estas propiedades más en detalle.
La propiedad grid-auto-rows define la altura de las filas que se añaden automáticamente cuando los elementos
se salen de las filas definidas explícitamente.
Sintaxis:
.grid-container {
grid-auto-rows: value;
}
Dónde:
-
value: altura de las filas añadidas automáticamente. Se puede especificar en varias unidades de medida (px,%,fr,auto, etc.)
Ejemplo 1: Altura fija de las filas
En este ejemplo, todas las filas añadidas automáticamente tendrán una altura fija de 100px:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Tres columnas de igual ancho */
grid-auto-rows: 100px; /* Filas añadidas automáticamente tendrán una altura de 100px */
}
Ejemplo 2: Altura flexible de las filas
En este ejemplo, las filas añadidas automáticamente tendrán una altura mínima de 100px, pero pueden aumentar según sea necesario:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto); /* Altura mínima de las filas de 100px, puede aumentar automáticamente */
}
5.2 Propiedad grid-auto-columns
La propiedad grid-auto-columns define el ancho de las columnas que se añaden automáticamente cuando los elementos
se salen de las columnas definidas explícitamente.
Sintaxis:
.grid-container {
grid-auto-columns: value;
}
Dónde:
-
value: ancho de las columnas añadidas automáticamente. Se puede especificar en varias unidades de medida (px,%,fr,auto, etc.)
Ejemplo 1: Ancho fijo de las columnas
En este ejemplo, todas las columnas añadidas automáticamente tendrán un ancho fijo de 100px:
.grid-container {
display: grid;
grid-template-rows: repeat(3, 100px); /* Tres filas de altura fija */
grid-auto-columns: 100px; /* Columnas añadidas automáticamente tendrán un ancho de 100px */
}
Ejemplo 2: Ancho flexible de las columnas
En este ejemplo, las columnas añadidas automáticamente tendrán un ancho mínimo de 100px, pero pueden
aumentar hasta ocupar una fracción del espacio libre:
.grid-container {
display: grid;
grid-template-rows: repeat(3, 100px);
grid-auto-columns: minmax(100px, 1fr); /* Ancho mínimo de las columnas 100px, puede aumentar hasta ocupar una fracción del espacio libre */
}
5.3 Propiedad grid-auto-flow
La propiedad grid-auto-flow define cómo colocar automáticamente los elementos en la cuadrícula, que no están explícitamente definidos
mediante las propiedades grid-row y grid-column.
Sintaxis:
.grid-container {
grid-auto-flow: value;
}
Dónde:
value: valor que define el orden de colocación de los elementos. Valores posibles:
row(por defecto): los elementos se colocan por filascolumn: los elementos se colocan por columnasdense: los elementos se colocan con llenado denso, sin celdas vacías (se utiliza conrowocolumn)
Ejemplo 1: Colocación por filas
En este ejemplo, los elementos se colocarán por filas, llenando una fila tras otra:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row; /* Los elementos se colocan por filas */
}
Ejemplo 2: Colocación por columnas
En este ejemplo, los elementos se colocarán por columnas, llenando una columna tras otra:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: column; /* Los elementos se colocan por columnas */
}
Ejemplo 3: Llenado denso
En este ejemplo, los elementos se colocarán por filas con llenado denso, minimizando la cantidad de celdas vacías:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row dense; /* Los elementos se colocan por filas con llenado denso */
}
5.4 Ejemplo de implementación completa
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Tres columnas de igual ancho */
grid-auto-rows: 100px; /* Filas añadidas automáticamente tendrán una altura de 100px */
grid-auto-flow: row dense; /* Los elementos se colocan por filas con llenado denso */
gap: 10px;
}
.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 colocación automática de elementos en CSS Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">Elemento 1</div>
<div class="grid-item">Elemento 2</div>
<div class="grid-item">Elemento 3</div>
<div class="grid-item">Elemento 4</div>
<div class="grid-item">Elemento 5</div>
<div class="grid-item">Elemento 6</div>
</div>
</body>
</html>
Explicación del código:
-
.grid-container: crea un contenedor Grid con tres columnas de igual ancho y filas automáticas con una altura de100px. Los elementos se colocan por filas con llenado denso. -
.grid-item: define estilos básicos para los elementos de la cuadrícula, como el color de fondo, color del texto, relleno, alineación del texto y borde.
GO TO FULL VERSION