CSS Grid 实现经典双栏布局

使用 CSS Grid 可以轻松创建响应式双栏布局，代码简洁且控制灵活。

.container {
  display: grid;
  grid-template-columns: 1fr 3fr; /* 左栏占比1份，右栏占比3份 */
  gap: 20px; /* 设置间距 */
  min-height: 400px;
}

.sidebar {
  background-color: #f0f0f0;
  padding: 20px;
}

.main-content {
  background-color: #e0e0e0;
  padding: 20px;
}

<div class="container">
  <div class="sidebar">侧边栏导航</div>
  <div class="main-content">主要内容区域</div>
</div>

布局特点：

• fr 单位按比例分配剩余空间
• gap 属性统一控制间距
• 代码量比传统浮动方法减少约60%

CSS Grid 是现代布局的首选方案，无需复杂计算即可实现精准分栏。