4.1 Propiedad grid-column
CSS Grid Layout ofrece buenas herramientas para manejar la colocación de elementos en la cuadrícula. Entre las herramientas principales están las propiedades grid-row y grid-column. Estas propiedades permiten a los desarrolladores especificar exactamente qué filas y columnas deben ocupar los elementos de la cuadrícula, proporcionando flexibilidad y control sobre el diseño.
La propiedad grid-column define qué columnas ocupará un elemento en el grid-container.
Sintaxis:
.grid-item {
grid-column: start / end;
}
Donde:
start: línea inicial de la cuadrículaend: línea final de la cuadrícula
Ejemplo 1: Colocación de un elemento en una columna específica
En este ejemplo, el elemento se ubicará entre la segunda y tercera líneas de la cuadrícula, ocupando la segunda columna:
.grid-item {
grid-column: 2 / 3; /* El elemento ocupa el espacio entre la segunda y tercera líneas de la cuadrícula */
}
Ejemplo 2: Elemento que ocupa varias columnas
En este ejemplo, el elemento ocupará tres columnas, comenzando desde la primera línea y terminando en la cuarta línea de la cuadrícula:
.grid-item {
grid-column: 1 / 4; /* El elemento ocupa el espacio desde la primera hasta la cuarta línea de la cuadrícula */
}
Ejemplo 3: Uso de span para abarcar múltiples columnas
En este ejemplo, el elemento abarcará dos columnas, comenzando desde la posición actual:
.grid-item {
grid-column: span 2; /* El elemento ocupa dos columnas, comenzando desde la posición actual */
}
4.2 Propiedad grid-row
La propiedad grid-row define qué filas ocupará un elemento en el grid-container.
Sintaxis:
.grid-item {
grid-row: start / end;
}
Donde:
start: línea inicial de la cuadrículaend: línea final de la cuadrícula
Ejemplo 1: Colocación de un elemento en una fila específica
En este ejemplo, el elemento se ubicará entre la primera y segunda líneas de la cuadrícula, ocupando la primera fila:
.grid-item {
grid-row: 1 / 2; /* El elemento ocupa el espacio entre la primera y segunda líneas de la cuadrícula */
}
Ejemplo 2: Elemento que ocupa varias filas
En este ejemplo, el elemento ocupará dos filas, comenzando desde la segunda línea y terminando en la cuarta línea de la cuadrícula:
.grid-item {
grid-row: 2 / 4; /* El elemento ocupa el espacio desde la segunda hasta la cuarta línea de la cuadrícula */
}
Ejemplo 3: Uso de span para abarcar múltiples filas
En este ejemplo, el elemento abarcará tres filas, comenzando desde la posición actual:
.grid-item {
grid-row: span 3; /* El elemento ocupa tres filas, comenzando desde la posición actual */
}
Ejemplo 4. Uso de valores negativos
.element {
grid-row: 1 / -1; /* El elemento comienza en la primera línea y termina en la última */
}
4.3 Combinación de propiedades grid-row y grid-column
Para crear diseños más complejos, se pueden combinar las propiedades grid-row y grid-column para controlar con precisión la colocación de los elementos.
Ejemplo: Diseño complejo usando grid-row y grid-column
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Row and Column Example</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 100px);
gap: 10px;
}
.item1 {
background-color: lightblue;
grid-row: 1 / 3; /* El elemento ocupa la primera y segunda filas */
grid-column: 1 / 3; /* El elemento ocupa la primera y segunda columnas */
}
.item2 {
background-color: lightgreen;
grid-row: 3 / 5; /* El elemento ocupa la tercera y cuarta filas */
grid-column: 2 / 5; /* El elemento ocupa la segunda, tercera y cuarta columnas */
}
.item3 {
background-color: lightcoral;
grid-row: 1 / 2; /* El elemento ocupa la primera fila */
grid-column: 3 / 5; /* El elemento ocupa la tercera y cuarta columnas */
}
</style>
</head>
<body>
<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>
</body>
</html>
Explicación:
- El contenedor
.containertiene cuatro filas y cuatro columnas, cada una ocupando un espacio igual - El elemento
.item1ocupa las dos primeras filas y las dos primeras columnas - El elemento
.item2ocupa la tercera y cuarta filas y la segunda, tercera y cuarta columnas - El elemento
.item3ocupa la primera fila y la tercera y cuarta columnas
GO TO FULL VERSION