响应式布局与侧边栏

创建一个带有内容区域和侧边栏的响应式布局。

• 在父容器上使用 display: grid，创建一个网格布局。
• 对于第二列（侧边栏），使用 minmax() 来允许它占据 150px 到 20% 之间的空间。
• 对于第一列（主内容），使用 1fr 来占据剩余的空间。

<div class="container">
  <main>
    这个元素占据了 1fr 的空间。
  </main>
  <aside>
    最小：150px / 最大：20%
  </aside>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr minmax(150px, 20%);
  height: 100px;
}

main, aside {
  padding: 12px;
  text-align: center;
}

main {
  background: #d4f2c4;
}

aside {
  background: #81cfd9;
}