Áreas con nombre

Parte de la sección Dominio de CSS del Journey de HTML de Coddy. Lección 33 de 43.

En lugar de colocar elementos usando números de línea, puedes dar nombres a partes de tu cuadrícula mediante la propiedad grid-template-areas. Este método es excelente para crear diseños limpios y legibles, especialmente cuando trabajas con varias secciones, como encabezados, barras laterales y pies de página. Mira el ejemplo a continuación:

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

.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 forma una fila, y cada palabra de la línea es una parte de la cuadrícula. Si repites una palabra, esa área se extenderá por más espacio.

Después, haces coincidir 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; }

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 en grid
grid-template-columns en 1fr 3fr
grid-template-rows en auto 1fr auto
grid-template-areas en:
"header header"
"profile main"
"footer footer"

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

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>