2.1 Propiedad display: grid
CSS Grid Layout es un sistema de diseño potente que te permite crear layouts complejos de páginas web utilizando filas y columnas. El paso principal al trabajar con CSS Grid es crear un contenedor Grid. A continuación veremos cómo usar la propiedad display: grid para crear un contenedor Grid y gestionar sus aspectos básicos.
Conceptos básicos para la creación de un contenedor Grid
Propiedad display: grid
La propiedad display: grid define un elemento como un contenedor Grid. Este es el paso básico que permite utilizar todo el potencial de CSS Grid para el diseño de elementos.
Ejemplo:
.grid-container {
display: grid;
}
Elementos principales del contenedor Grid
Después de definir un contenedor Grid con la propiedad display: grid, todos los elementos hijos de ese contenedor se convierten automáticamente en elementos grid. Esto permite gestionar su ubicación y alineación dentro del contenedor.
Ejemplo:
.grid-container {
display: grid;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de contenedor 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>
</body>
</html>
Explicación del código:
.grid-container: define el elemento como un contenedor Grid usando la propiedaddisplay: grid. También agrega un borde para destacar visualmente el contenedor.grid-item: define estilos básicos para los elementos dentro del contenedor Grid, como color de fondo, color de texto, padding, borde y alineación de texto
2.2 Contenedores Grid Anidados
Una de las ventajas de CSS Grid es la posibilidad de crear contenedores Grid anidados. Esto permite crear diseños complejos donde un elemento grid puede convertirse en un contenedor grid para sus elementos hijos.
Ejemplo:
.grid-container {
display: grid;
gap: 10px;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
.nested-grid-container {
display: grid;
gap: 5px;
background-color: #2980b9;
padding: 10px;
}
.nested-grid-item {
background-color: #1abc9c;
padding: 10px;
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>Contenedores Grid Anidados</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">Elemento 1</div>
<div class="grid-item">
<div class="nested-grid-container">
<div class="nested-grid-item">Elemento Anidado 1</div>
<div class="nested-grid-item">Elemento Anidado 2</div>
</div>
</div>
<div class="grid-item">Elemento 3</div>
</div>
</body>
</html>
Explicación del código:
-
.nested-grid-container: define un contenedor Grid anidado usando la propiedaddisplay: grid, y también añade espacios entre los elementos (gap: 5px) y padding interno (padding: 10px) -
.nested-grid-item: define estilos básicos para los elementos dentro del contenedor Grid anidado, como color de fondo, padding y borde
2.3 Gestión del comportamiento del contenedor Grid
La propiedad display: grid también permite usar propiedades adicionales para gestionar el comportamiento del contenedor Grid. Por ejemplo, la propiedad grid-auto-flow gestiona la colocación automática de los elementos.
Ejemplo:
.grid-container {
display: grid;
grid-auto-flow: row;
gap: 10px;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contenedor Grid con auto-flow</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>
</body>
</html>
2.4 Uso de Flexbox dentro de un contenedor Grid
En algunos casos, usar Flexbox dentro de los elementos grid puede ser útil para crear layouts más complejos. Esto permite combinar las ventajas de ambas tecnologías.
.grid-container {
display: grid;
gap: 10px;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
.flex-container {
display: flex;
gap: 10px;
}
.flex-item {
background-color: #1abc9c;
padding: 10px;
flex: 1;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox dentro de un contenedor Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item flex-container">
<div class="flex-item">Elemento Flex 1</div>
<div class="flex-item">Elemento Flex 2</div>
</div>
<div class="grid-item">Elemento 2</div>
<div class="grid-item">Elemento 3</div>
</div>
</body>
</html>
Explicación del código:
.flex-container: define un elemento grid como un contenedor flex con la propiedaddisplay: flex.flex-item: define estilos básicos para los elementos dentro del contenedor flex, como color de fondo, padding y flexibilidad (flex: 1)
GO TO FULL VERSION