Áreas con nombre

Parte de la sección CSS Mastery del Journey de HTML de Coddy — lección 33 de 43.

En lugar de colocar elementos utilizando números de línea, puedes dar nombres a partes de tu cuadrícula utilizando la propiedad grid-template-areas. Este método es ideal para crear diseños limpios y legibles, especialmente cuando se trabaja con múltiples secciones como encabezados, barras laterales y pies de página. Echa un vistazo al siguiente ejemplo:

Definimos un contenedor con CSS Grid y usamos grid-template-areas para crear un diseño con nombre:

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

Cada línea de texto crea una fila, y cada palabra en la línea es una parte de la cuadrícula. Si repites una palabra, esa área se extenderá por más espacio.

Luego, asocias tus elementos HTML con esos nombres de esta manera:

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Desafío

Fácil

Crea un diseño de cuadrícula CSS para una página web básica con las siguientes áreas como en la imagen de abajo:

Establece las siguientes propiedades en el selector .container:

display a grid
grid-template-columns a 1fr 3fr
grid-template-rows a auto 1fr auto
grid-template-areas a:
"header header"
"profile main"
"footer footer"

Asigna cada elemento a su área respectiva. Por ejemplo, para el .header establece grid-area a header.

Hoja de referencia

Usa grid-template-areas para crear diseños de cuadrícula con nombre:

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

Cada línea de texto crea una fila, y cada palabra en la línea es una parte de la cuadrícula. Repetir una palabra extiende esa área a través de más espacio.

Asigna elementos a áreas de la cuadrícula usando grid-area:

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

Pruébalo tú mismo

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      height: 100vh;
      gap: 10px;
      /* Set up your grid container here */
      
    }
    
    .header {
      /* Assign to header area */
      background-color: #f1c40f;
      padding: 20px;
    }
    
    .profile {
      /* Assign to profile area */
      background-color: #3498db;
      padding: 20px;
    }
    
    .main {
      /* Assign to main area */
      background-color: #2ecc71;
      padding: 20px;
    }
    
    .footer {
      /* Assign to footer area */
      background-color: #e74c3c;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">Header</div>
    <div class="profile">Profile</div>
    <div class="main">Main Content</div>
    <div class="footer">Footer</div>
  </div>
</body>
</html>

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.