CSS网格：内容未显示

Question

我想制作一个看起来像这样的网格布局：

.container

我尝试使用以下代码进行操作：

HTML：

"sidebar header header header header"
"sidebar content content content content"
"footer footer footer footer footer"

CSS：

<main>
  <section class = "header"></section>
  <aside class = "sidebar"></aside>
  <section class = "content"></section>
  <section class = "footer"></section>
</main>

但是，当我尝试运行代码时，黄色内容没有显示出来。

这是JSFiddle，其代码为：https://jsfiddle.net/wd0k5b4r/