body{
  margin: 0;
}
.container {
  max-width:960px;
  margin:0 auto;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 150px auto auto;
  grid-template-areas: "header header header header"
                       "main main main sidebar"
                       "footer footer footer footer";
}

.grid-item div {
  font-size: 1.5rem;
  height: 100%;
}

header {
  background: url(https://uniform.wingzero.tw/assets/images/japan-tohoku.jpg);
  background-size: cover;
  grid-area: header;
}

main {
  grid-area: main;
}

aside {
  grid-area: sidebar;
}

.footer {
  border-top:1px solid #ccc;
  padding:10px;
  text-align: center;
  grid-area: footer;
}