> Faqs > Dudas al usar CSS Grid Layout en una maquetación y posicionar correctamente los elementos

Dudas al usar CSS Grid Layout en una maquetación y posicionar correctamente los elementos

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.

Responder la pregunta
Editar Hacer otra preguntaPreguntar

Respuestas

Tu código resulta bastante extraño por varios motivos. Creo que deberías apoyarte en flex box y css grid, combinados. Hay cosas que haces con un grid que quizás un simple flexbox te lo daría ya listo, o que ni siquiera hace falta ninguno de los dos, pues un simple elemento de display block ya te lo permite.

Por ejemplo

  • El contenedor ¿Por qué es una rejilla? simplemente un elemento de bloque donde cada bloque (cabecera, cuerpo, pie) se van colocando uno debajo del otro es suficiente.
  • c_cabecera ¿por qué es una rejilla?. Incluso ¿por qué defines grid-template-columns y grid-template-rows si solamente tienes una fila? En cualquier caso, para alinear los elementos uno al lado del otro es más cómodo usar flexbox y además tiene mayor soporte en navegadores.

Ahora, tu pregunta sobre darle un poco de margin al logo, que provoca que los tres elementos se muevan. Creo que es una apreciación provocada por el uso de margin, cuando quizás lo que en realidad quieres hacer es padding. Pero en realidad no veo el efecto que quieres explicar. Al colocar un margin en #logo, solo se me mueve el logo, las otras celdas del grid permanecen en su sitio. Pero lo dicho, prueba a colocar un padding a ver si eso te soluciona el efecto que te desagrada. Obviamente, no hay que usar position absolute para nada en esta maquetación, por lo que no es la solución.

Miguel Angel
1441 66 95 5
Muchas gracias, Miguel Angel.