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;
} ```