Guía Rápida: Cómo Utilizar CSS Grid Area

Paso 1: Configurar el Contenedor

Primero, necesitas un contenedor para tu grid. Este contenedor se configura con la propiedad display: grid; y definimos las filas y columnas con grid-template-rows y grid-template-columns.

<div class="grid-container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

.grid-container {
  display: grid;
  grid-template-rows: 100px 1fr 100px;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
}

Paso 2: Definir las Áreas del Grid

En el CSS del contenedor, utiliza la propiedad grid-template-areas para definir un nombre para cada área del grid. Cada nombre de área debe corresponderse con una celda o un grupo de celdas en el grid.

.grid-container {
  display: grid;
  grid-template-rows: 100px 1fr 100px;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
}

Paso 3: Asignar Áreas a los Elementos

Luego, en el CSS de cada elemento del grid, utiliza la propiedad grid-area para asignar el área correspondiente.

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

Paso 4: Ajustar y Personalizar

A partir de aquí, puedes ajustar los estilos de cada área según tus necesidades. Por ejemplo, puedes añadir fondos, márgenes, paddings, etc.

.header {
  grid-area: header;
  background-color: #4CAF50;
  color: white;
  text-align: center;
  padding: 20px;
}

.sidebar {
  grid-area: sidebar;
  background-color: #2196F3;
  color: white;
  padding: 20px;
}

.content {
  grid-area: content;
  background-color: #f1f1f1;
  padding: 20px;
}

.footer {
  grid-area: footer;
  background-color: #777;
  color: white;
  text-align: center;
  padding: 10px;
}

Resultado Final

El resultado será un diseño limpio y estructurado, con áreas claramente definidas y fáciles de gestionar.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Area</title>
<style>
  .grid-container {
    display: grid;
    grid-template-rows: 100px 1fr 100px;
    grid-template-columns: 200px 1fr;
    grid-template-areas:
      "header header"
      "sidebar content"
      "footer footer";
  }

  .header {
    grid-area: header;
    background-color: #4CAF50;
    color: white;
    text-align: center;
    padding: 20px;
  }

  .sidebar {
    grid-area: sidebar;
    background-color: #2196F3;
    color: white;
    padding: 20px;
  }

  .content {
    grid-area: content;
    background-color: #f1f1f1;
    padding: 20px;
  }

  .footer {
    grid-area: footer;
    background-color: #777;
    color: white;
    text-align: center;
    padding: 10px;
  }
</style>
</head>
<body>

<div class="grid-container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

</body>
</html>

Conclusión

CSS Grid Area es una forma poderosa y flexible de diseñar layouts complejos de manera sencilla. Con esta guía, deberías ser capaz de crear y personalizar tus propios diseños de grid utilizando áreas nombradas.

Etiquetas:

Autor:

Albert Jurado Manjon

Fullstack developer