Buenas, he estado tocando el GRID y hay dos cosas que no llego a entender.
En primer lugar, he creado un div en el cual he creado un grid, básicamente para posicionar los elementos principales de mi página web, tales como el header, section, nav, etc.
Dentro del header, he vuelto a crear otro grid, el cual lo he dividido en tres recuadros; a la izquierda el logo o nombre de la página, en medio el buscador y a la derecha el área de registro (lo he puesto de color rojo, amarillo y azul para distinguir). Cuando intento posicionar el logo (rojo) con margin a la izquierda, se me mueven los 3 recuadros que componen el header.
He probado a utilizar text-align para situar el contenido a la izquierda, pero no quiero que quede totalmente pegado. Me gustaría saber como podría situar mi logo o texto a un punto exacto sin tener que recurrir a position-absolute o relative.
HTML
<!DOCTYPE html>
<head>
<title>Dgreed</title>
<link rel="stylesheet" href="css/estilo.css">
<link href="https://fonts.googleapis.com/css?family=Barlow+Semi+Condensed&display=swap" rel="stylesheet">
</head>
<body>
<div id="contenedor">
<header>
<div id="c_cabecera">
<div id="logo">Degreed</div>
<div id="buscador">2</div>
<div id="area_usuario">
<ul>
<li>Iniciar sesión</li>
<li> / </li>
<li>Registrarse</li>
</ul>
</div>
</div>
</header>
<nav></nav>
<section></section>
<aside>
<div id="barrera_lateral">Próximos lanzamientos</div>
<div id="Juegos">
</div>
</aside>
<footer></footer>
</div>
</body>
CSS
*{
margin: 0;
padding: 0;
}
body{
background-color: rgb(220,220,220);
}
#contenedor{
display: grid;
height: 970px;
grid-template-columns: repeat(6,6fr);
grid-template-rows: 60px 30px 810px 70px;
text-align: center;
}
header{
background-color: black;
grid-column-start: 1;
grid-column-end: 7;
}
#c_cabecera{
background-color: black;
display: grid;
height: 100%;
grid-template-columns: repeat(6,6fr);
grid-template-rows: 70% 30%;
}
#logo{
background-color: red;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
font-family: barlow semi condensed;
font-size: 40px;
text-align: 90px;
color: white;
text-align: left;
}
#buscador{
background-color: yellow;
grid-column-start: 3;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 3;
}
#area_usuario{
background-color: blue;
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 2;
grid-row-end: 3;
font-size: 14px;
color: white;
}
#area_usuario ul{
text-align: right;
}
#area_usuario li{
list-style-type: none;
display: inline-block;
}
#area_usuario li: hover{
color: yellow;
}
nav{
background-color: rgb(50,50,50);
grid-column-start: 1;
grid-column-end: 7;
}
section{
background-color: rgb(132,62,62);
grid-column-start: 2;
grid-column-end: 5;
}
aside{
background-color: rgb(132, 50 ,50);
grid-column-start: 5;
grid-column-end: 6;
}
#barrera_lateral{
display: grid;
grid-template-rows: 10% 10%;
font-size: 20px;
}
footer{
background-color: brown;
grid-column-start: 1;
grid-column-end: 7;
}
Lo mismo me ocurre en donde pone Proximos lanzamientos, ya que quiero bajar un poco ese texto, pero no se si poner sobre él una celda vacía o hay otra manera, ya que me parece un poco chapucero.
Un saludo y gracias.