带有侧边栏的响应式布局

简介

在本实验中，我们将探索 CSS 编程的世界。本实验的主要目标是提供创建带有侧边栏的响应式布局的实践经验。在本实验结束时，你将更好地理解如何使用 display: grid 和 minmax() 属性来创建一个有效且视觉上吸引人的布局。

这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个初级级别的实验，完成率为 100%。获得了学习者 100% 的好评率。

虚拟机中已经提供了 index.html 和 style.css。

要创建一个包含内容区域和侧边栏的响应式布局，请在父容器上使用 display: grid，对第二列（侧边栏）使用 minmax()，使其宽度在 150px 到 20% 之间，对第一列（主要内容）使用 1fr 来占据剩余空间。以下是一个 HTML 和 CSS 代码示例：

<div class="container">
  <main>This element is 1fr large.</main>
  <aside>Min: 150px / Max: 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;
}

请点击右下角的“Go Live”以在端口 8080 上运行网络服务。然后，你可以刷新“Web 8080”标签页来预览网页。

总结

恭喜你！你已经完成了“带有侧边栏的响应式布局”实验。你可以在 LabEx 中练习更多实验来提升你的技能。