estilos.css

* {
	margin: 0;
	padding: 0;
}

body {
    background: #ee9ca7;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #ffdde1, #ee9ca7);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #ffdde1, #ee9ca7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    
	color: #000;
	font-family: 'Shadows Into Light', cursive;
}

.contenedor {
	width: 90%;
	max-width: 1000px;
	margin: 20px auto;
	display: grid;
	grid-gap: 20px;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(4, auto);
    text-align: justify;
 


	grid-template-areas: "header header header"
						 "contenido contenido sidebar"
						 "widget-1 widget-2 sidebar"
						 "footer footer footer";

}

.contenedor > div,
.contenedor .header,
.contenedor .contenido,
.contenedor .sidebar,
.contenedor .footer {
	background: #fff;
	padding: 20px;
	border-radius: 4px;
}

.contenedor .header {
	background: #ffffff;
	color: rgb(0, 0, 0);
	grid-area: header;
   

}

.contenedor .contenido {
	grid-area: contenido;

    
}

.contenedor .sidebar {
	grid-column: 3 / 4;
	background: #7f79a7;
    color: #fff;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100px;
	grid-area: sidebar;

}

.contenedor .widget-1,
.contenedor .widget-2 {
	background: #B0CCFF;
	color: rgb(0, 0, 0);
	height: 100px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.contenedor .widget-1 {
	grid-area: widget-1;
}

.contenedor .widget-2 {
	grid-area: widget-2;
}

.contenedor .footer {
	background: #f7f7f7;
	color: rgb(0, 0, 0);
	grid-area: footer;
  

}

@media screen and (max-width: 768px){
	.contenedor {
		grid-template-areas: "header header header"
						 "contenido contenido contenido"
						 "sidebar sidebar sidebar"
						 "widget-1 widget-1 widget-2"
						 "footer footer footer";
	}
}