CSS Grid Layout nos permite crear maquetaciones complejas con facilidad. El Grid Container es la base de esta herramienta, y en este artículo veremos cómo configurarlo y utilizar sus propiedades más importantes.
Configuración Inicial
Crear un Archivo HTML Empezamos creando un archivo
index.htmlcon la estructura básica de HTML5 y un contenedor para nuestro grid:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Layout</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>Crear una Hoja de Estilos CSS Creamos un archivo
styles.cssy lo vinculamos a nuestro HTML. Aquí configuraremos el Grid Container y sus elementos.
Definiendo el Grid Container
Propiedades Básicas del Grid Container
.grid-container {
display: grid;
background-color: #f4f4f4;
padding: 10px;
}
.grid-container > div {
background-color: #ffcccb;
padding: 20px;
font-size: 1.5rem;
text-align: center;
border: 1px solid #000;
}Definir Columnas y Filas
Utilizamos la propiedad grid-template-columns para definir el número y tamaño de las columnas:
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: #f4f4f4;
padding: 10px;
}Ahora, nuestro grid tiene tres columnas de tamaño automático.
Ajustar el Tamaño de Columnas y Filas
Podemos especificar tamaños específicos para las columnas y filas:
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto 100px auto;
gap: 10px;
background-color: #f4f4f4;
padding: 10px;
}Aquí, la primera y tercera columna ocupan una fracción del espacio disponible, mientras que la segunda columna ocupa dos fracciones. La segunda fila tiene una altura fija de 100 píxeles.
Alineación y Espaciado
Justificación del Contenido
Usamos
justify-contentpara alinear las columnas horizontalmente:
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
justify-content: center;
gap: 10px;
background-color: #f4f4f4;
padding: 10px;
}Aquí, las columnas se centran en el contenedor.
Alineación del Contenido Vertical
La propiedad
align-contentnos permite alinear las filas verticalmente:
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
align-content: center;
height: 400px;
gap: 10px;
background-color: #f4f4f4;
padding: 10px;
}Para que align-content funcione, debemos especificar una altura para el contenedor.
Distribución del Espacio
Podemos distribuir el espacio entre los elementos con
justify-contentyalign-content:
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
justify-content: space-between;
align-content: space-around;
height: 400px;
gap: 10px;
background-color: #f4f4f4;
padding: 10px;
}Estas propiedades permiten una distribución más equilibrada de los elementos dentro del contenedor.
Conclusión
El Grid Container en CSS Grid Layout es una herramienta poderosa para crear maquetaciones web complejas. Hemos visto cómo configurar un Grid Container básico y cómo utilizar sus propiedades para ajustar columnas, filas y la alineación del contenido. Si deseas profundizar en CSS Grid, te animo a seguir practicando y experimentando con diferentes configuraciones.
