1

Estoy aprendiendo grid layout en CSS, y mi grid es de 12 columnas y 12 filas con longitud auto. Tengo un header que ocupa desde la primera columna a la última columna, y dentro del header un nav que quiero que ocupe desde la séptima columna hasta la última, pero cuando escribo el código, el nav se posiciona desde la primera columna, y no entiendo por qué. El nav dentro tiene una ul con display flex, no se si tenga algo que ver, creo que no, porque el problema en sí radica en el nav, pero aquí les dejo mi código HTML y CSS, la clase del header es #main-header, y la clase del nav es #main-header-nav:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="author" content="Jesus Diaz">
        <meta name="description" content="Portfolio Web Software Design">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="cache-control" content="no-cache"/>
        <link rel="stylesheet" href="index.css">
        <title>Jesus Diaz</title>
    </head>
    <body>
        <div class="main">
            <header id="main-header">
                <nav id="main-header-nav">
                    <ul id="main-header-nav-ul">
                        <li class="List"><a href="" class="Link mainNavUlA">About</a></li>
                        <li class="List"><a href="" class="Link mainNavUlA">Experience</a></li>
                        <li class="List"><a href="" class="Link mainNavUlA">Work</a></li>
                        <li class="List"><a href="" class="Link mainNavUlA">Contact</a></li>
                    </ul>
                </nav>
            </header>
        </div>
    </body>
</html>
@font-face {
    font-family: "Roboto-Medium";
    src: url('fonts/Roboto-Medium.ttf');
}

@font-face {
    font-family: "CaviarDreams";
    src: url('fonts/CaviarDreams.ttf');
}

@font-face {
    font-family: "CaviarDreams_Bold";
    src: url('fonts/CaviarDreams_Bold.ttf');
}

* {
    margin: 0;
    padding: 0;
}

body {
    width: 100vw;
    height: 100vh;
    font-size: 65px;
    background-color: #03051C;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main {
    /* width: 73.21%; */
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(12, auto);
    grid-template-rows: repeat(12, auto);
    grid-gap: 20px
}

#main-header {
    height: 23px;
    grid-column: 1 / -1;
    position: relative;
    top: 45px; 
}

#main-header-nav {
    font-family: "Roboto-Medium";
    font-weight: 700;
    font-size: 0.27em;
    font-weight: lighter;
    width: 40.5%;
    grid-column: 7 / -1;
}

#main-header-nav-ul{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.List {
    list-style: none;
}

.Link {
    color: rgba(171, 201, 227, 0.6);
    text-decoration: none;
    transition: color .3s linear;
}

.mainNavUlA:hover {
    color: #6CBDF0;
}

Lo que quiero es situar el nav desde la columna 7 hasta la columna -1, pero este se posiciona es en la columna 1.

1 respuesta 1

1

Con grid estableces una relación de comportamiento entre el elemento que lo posee y sus hijos directos. Como #main-header-nav es nieto del elemento que posee grid no sabe a que te estás refiriendo cuando le dices que comience su renderizado en la séptima columna. Necesitas que su padre tenga grid.

@font-face {
    font-family: "Roboto-Medium";
    src: url('fonts/Roboto-Medium.ttf');
}

@font-face {
    font-family: "CaviarDreams";
    src: url('fonts/CaviarDreams.ttf');
}

@font-face {
    font-family: "CaviarDreams_Bold";
    src: url('fonts/CaviarDreams_Bold.ttf');
}

* {
    margin: 0;
    padding: 0;
}

body {
    width: 100vw;
    height: 100vh;
    font-size: 65px;
    background-color: #03051C;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main {
    /* width: 73.21%; */
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(12, auto);
    grid-template-rows: repeat(12, auto);
    grid-gap: 20px
}

#main-header {
    display: grid; /*Añadido para solución*/
    grid-template-columns: repeat(12, auto);  /*Añadido para solución*/
    height: 23px;
    grid-column: 1 / -1;
    position: relative;
    top: 45px; 
}

#main-header-nav {
    font-family: "Roboto-Medium";
    font-weight: 700;
    font-size: 0.27em;
    font-weight: lighter;
    width: 40.5%;
    grid-column: 7 / -1;
}

#main-header-nav-ul{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.List {
    list-style: none;
}

.Link {
    color: rgba(171, 201, 227, 0.6);
    text-decoration: none;
    transition: color .3s linear;
}

.mainNavUlA:hover {
    color: #6CBDF0;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="author" content="Jesus Diaz">
        <meta name="description" content="Portfolio Web Software Design">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="cache-control" content="no-cache"/>
        <link rel="stylesheet" href="index.css">
        <title>Jesus Diaz</title>
    </head>
    <body>
        <div class="main">
            <header id="main-header">
                <nav id="main-header-nav">
                    <ul id="main-header-nav-ul">
                        <li class="List"><a href="" class="Link mainNavUlA">About</a></li>
                        <li class="List"><a href="" class="Link mainNavUlA">Experience</a></li>
                        <li class="List"><a href="" class="Link mainNavUlA">Work</a></li>
                        <li class="List"><a href="" class="Link mainNavUlA">Contact</a></li>
                    </ul>
                </nav>
            </header>
        </div>
    </body>
</html>

1
  • Muchas gracias!
    – Jesus Diaz
    Commented el 11 ago. 2021 a las 12:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.