建站实战干货

使用 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 是现代布局的首选方案，无需复杂计算即可实现精准分栏。