1.1 Principios básicos del Grid Layout
CSS Grid Layout es una herramienta poderosa para crear diseños complejos y adaptativos. Ofrece a los desarrolladores un sistema de rejilla bidimensional para ubicar elementos, lo que facilita la creación de diseños tanto simples como complejos. Vamos a ver las principales ideas y sintaxis de CSS Grid sin profundizar en propiedades específicas.
Principales conceptos de CSS Grid
-
Grid-container y Grid-elements:
-
Grid-container — es un elemento que incluye
display: grid. Este elemento se convierte en un contenedor de rejilla, y todos sus elementos hijos directos se convierten en Grid-elements. - Grid-elements — son los elementos hijos directos del Grid-container, que se colocan en la rejilla.
-
Grid-container — es un elemento que incluye
-
Ejes de la rejilla:
- Eje principal (inline axis) y eje de bloque (block axis): Grid utiliza dos ejes para colocar elementos — el eje principal y el eje de bloque. Por defecto, el eje principal va horizontalmente y el de bloque verticalmente.
-
Celdas de la rejilla (Grid Cells):
- Celdas de la rejilla — son los bloques básicos formados en la intersección de filas y columnas. Cada Grid-element ocupa una o más celdas.
-
Líneas de la rejilla (Grid Lines):
- Líneas de la rejilla — son líneas horizontales y verticales que dividen filas y columnas. Se usan para colocar elementos en relación a la rejilla.
-
Áreas de la rejilla (Grid Areas):
- Áreas de la rejilla — son áreas nombradas de la rejilla, creadas uniendo varias celdas. Permiten agrupar celdas y colocar elementos en áreas específicas.
1.2 Elementos sintácticos
Principales elementos sintácticos de CSS Grid
1. Crear un Grid-container:
.container {
display: grid; /* o display: inline-grid */
}
2. Definir la estructura de la rejilla:
CSS
.container {
display: grid;
grid-template-columns: 100px 200px 100px; /* Define tres columnas de diferente ancho */
grid-template-rows: 50px 100px; /* Define dos filas de diferente altura */
}
3. Unir celdas con grid-area:
CSS
.item1 {
grid-area: 1 / 1 / 2 / 4; /* El elemento ocupa la primera fila y las tres primeras columnas */
}
4. Ubicación automática de elementos:
CSS
.container {
display: grid;
grid-auto-rows: minmax(100px, auto); /* Define la altura mínima de las filas */
}
1.3 Ejemplos
Diseño simple con CSS Grid:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Example</title>
<style>
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px;
gap: 10px;
}
.item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
Explicación:
- El contenedor .container define tres columnas, la primera y la tercera ocupan una parte igual del espacio disponible, y la segunda el doble
- Se definen dos filas con altura fija
- La propiedad gap establece la distancia entre las celdas de la rejilla
GO TO FULL VERSION