Solucionado
Buenas tardes!.. En el curso se ha visto definir una template con áreas (el caso del "body" del proyecto) donde luego en los elementos hijos se introducía grid-area: "nombre", y por otro lado, una template sin área (el caso de la sección de destaque). Consultas: ¿Qué diferencias existe, en el funcionamiento del código, entre un caso y otro? ¿Cuál es el motivo por el que deberíamos definir nombres de áreas? ¿Cuando aplicamos un caso y otro? Desde ya muchas gracias, saludos!
Hola,
Ante que nada, la pregunta es amplia, pero intentaré explicar un poco.
La forma de aplicar se debe más que nada en como se quiere mostrar un diseño dependiendo del dispositivo desde el que se acceda. Es decir, desde una computadora (ordenador) se puede visualizar de una manera, porque la pantalla es de un tamaño mayor a la pantalla de un dispositivo más pequeño (como la de un teléfono smart).
Dicho esto, en una pantalla grande, uno puede tener una distribución en donde se muestren todas las áreas del diseño a la vez, pero en una pantalla pequeña, se priorizara una, dos o tres áreas a mostrar y las otras estarán ocultas (ya sea en un menú con botón de hamburguesa ) o deslizar hacia abajo para seguir visualizando el contenido.
Ilustro con un ejemplo que encontré en la web:
Saludos.
No termino de entender bien.. en el siguiente fragmento de código:
.app {
background: #f1f1f1;
display: grid;
grid-template-areas:
"encabezado"
"contenido"
"rodapie";
grid-template-columns: auto;
grid-template-rows: 50px auto 50px;
}
.encabezado {
grid-area: encabezado;
/* mas código adicional a la clase*/
}
.contenido {
display: grid;
grid-area: contenido;
/* mas código adicional a la clase*/
}
.rodapie {
/*código adicional a la clase*/
}¿Cambiaría la responsibidad del pié de página por ejemplo en el cual no está definido el grid-area? ¿Habría que definir grid-template-areas en .contenido y luego definir grid-area a sus elementos hijos? ¿o no es necesario? ¿por qué?
Bueno, espero no abrumar con tantas preguntas. Desde ya gracias y saludos.-
En realidad, debes definir cada sección de tu código. Contra más ID, Class, etc. tengas en tu código, más control. Una sección puede estar definida como display grid y otra como flex, block, inline, etc. Incluso el padre puede estar con un display o los hijos con otro display.
¿Habría que definir grid-template-areas en .contenido y luego definir grid-area a sus elementos hijos? Así como está tu código si. Luego a los componentes hijos tu puedes definir otro tipo de display, dependiendo que es lo que necesites.
¿Cambiaría la responsibidad del pié de página por ejemplo en el cual no está definido el grid-area? Mira, comparto código para que veas que en dispositivos pequeños la configuración actúa de una manera y en grandes de otra: Si observas, en dispositivos mayores a 600px, el footer (rodapie) no cubre todo el ancho. Por lo tanto, es aconsejable que definas todas las áreas en tu código.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html, body {
height: 100%;
}
/*
Esta es la configuración inicial. Está pensado para celular
*/
.app {
background: #f1f1f1;
display: grid;
grid-template-areas:
"navbar"
"encabezado"
"contenido"
"rodapie";
grid-template-columns: auto;
grid-template-rows: 20px 50px auto 50px;
height: 100%;
}
.navbar {
grid-area: navbar;
background: #424241;
color: #f1f1f1;
}
.encabezado {
grid-area: encabezado;
background: #d2f827;
}
.contenido {
display: grid;
grid-area: contenido;
background: #54e1fa;
}
.rodapie {
background: #e2b9dd;
grid-auto-rows: auto;
}
/*
Esta es la configuración para dispositivos mayores a 600px.
Ejemplo: una tablett o computadora
*/
@media (min-width: 600px) {
.app {
display: grid;
grid-template-areas:
"navbar encabezado"
"navbar contenido"
"rodapie rodapie";
grid-template-rows: 50px auto 50px;
grid-template-columns: 200px auto;
}
}
</style>
</head>
<body>
<div class="app">
<nav class="navbar">NavBar</nav>
<header class="encabezado">Encabezado</header>
<main class="contenido">Contenido</main>
<footer class="rodapie">Rodapie</footer>
</div>
</body>
</html>Saludos.
PD1: si estoy respondiendo es porque me hice un tiempo y no me molesta las preguntas. PD2: estas utilizando React?
Muchas gracias por el tiempo! No, no utilizo React. No se como se utiliza. Soy nuevo en la programación, por el momento estoy realizando los cursos de Front-end UI... vamos de a poco :D Bueno, gracias de nuevo. Saludos!