0

Soy nuevo en programación y me ha surgido este inconveniente, cuando quiero ordenar mis divs con las areas ya creadas resulta que no estarian ordenando bien, sino que se queda el primer elemento y deja un espacio en blanco abajo de el mismo, y cuando le quiero cambiar el color solo se cambia el primer elemento del area

Esa es la duda que tengo, si alguien me puede ayudar se los agradeceria ya que lo veo muy util a esto

* {
    font-family: 'Lobster', cursive;
    font-weight: 100;
}

body {
    background: radial-gradient(circle,#fff,#bbb);
}

.grid-container{
    display: grid;
    background: #ba7;
    margin: 10px;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: repeat(4, 1fr);
    grid-template-areas: "header        header      header"
                         "sidebar-1     contenido   sidebar-2"
                         "sidebar-1     widgets     sidebar-2"
                         "footer        footer      footer";
    text-align: center;
}

.grid-item {
    height: 100px;
    background: red;
}

.grid-container .header{
    background: cyan;
    grid-column-start: header;
    grid-column-end: header;
}

.grid-container .sidebar-1{
    /*grid-column: sidebar-1;
    grid-row: sidebar-1;*/
    grid-area: sidebar-1;
    background-color: hotpink;
}

.grid-container .contenido{
    background: white;
    color: #000;
    grid-area: contenido;
}

.grid-container .widgets{
    background: orange;
    grid-area: widgets;
}

.grid-container .sidebar-2{
    background: grey;
    grid-area: sidebar-2;
}

.grid-container .footer{
    background: brown;
    
    grid-area: footer;
} ```

1 respuesta 1

0

En realidad no entiendo muy bien lo que te ocurre pero he copiado tu código y lo he probado en codepen, he echo algunas modificaciones y ya funciona. Creo que el problema lo tienes en la clase 'grid-item'.

* {
    font-family: 'Lobster', cursive;
    font-weight: 100;
}

body {
    background: radial-gradient(circle,#fff,#bbb);
}

.grid-container{
    display: grid;
    background: #ba7;
    margin: 10px;
    grid-gap: 20px;
    grid-template-areas: "header        header      header"
                         "sidebar-1     contenido   sidebar-2"
                         "sidebar-1     widgets     sidebar-2"
                         "footer        footer      footer";
    text-align: center;
}
div div {
  min-height: 50px;
}
.header{
    background: cyan;
    grid-column-start: header;
    grid-column-end: header;
}

.sidebar-1{
    /*grid-column: sidebar-1;
    grid-row: sidebar-1;*/
    grid-area: sidebar-1;
    background-color: hotpink;
}

.contenido{
    background: white;
    color: #000;
    grid-area: contenido;
}

.widgets{
    background: orange;
    grid-area: widgets;
}

.sidebar-2{
    background: grey;
    grid-area: sidebar-2;
}

.footer{
    background: brown;
    grid-area: footer;
}
<div class="grid-container">
    <div class="header"></div>
    <div class="sidebar-1"></div>
    <div class="contenido"></div>
    <div class="widgets"></div>
    <div class="sidebar-2"></div>
    <div class="footer"></div>
</div>

He borrado la clase grid-item y le he puesto una altura mínima a los divs para ver el resultado, si lo ejecutas verás que funciona perfectamente.

También he borrado el código que no es necesario:

grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: repeat(4, 1fr);

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.