怎么实现一个栅栏布局，左右边栏是固定的，中间是响应式的，有几种实现方式

flex：

<div class="container-flex">
  <div class="left">Left (200px)</div>
  <div class="center">Center (Fluid)</div>
  <div class="right">Right (200px)</div>
</div>
 
<style>
  .container-flex {
    display: flex;
    height: 100vh; /* 仅作演示 */
  }
  .left, .right {
    width: 200px;      /* 固定宽度 */
    background: #f0f0f0;
  }
  .center {
    flex: 1;           /* 占据剩余空间 */
    background: #e0e0e0;
  }
</style>

grid:

<div class="container-grid">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right">Right</div>
</div>
 
<style>
  .container-grid {
    display: grid;
    /* 左200px，中间自适应，右200px */
    grid-template-columns: 200px 1fr 200px; 
    height: 100vh;
  }
  .left { background: #f0f0f0; }
  .center { background: #e0e0e0; }
  .right { background: #f0f0f0; }
</style>

float+BFC

<div class="container-float">
  <div class="left">Left</div>
  <div class="right">Right</div>
  <div class="center">Center</div>
</div>
 
<style>
  .left {
    float: left;
    width: 200px;
    height: 100vh;
    background: #f0f0f0;
  }
  .right {
    float: right;
    width: 200px;
    height: 100vh;
    background: #f0f0f0;
  }
  .center {
    /* overflow: hidden 会触发 BFC，自动适应剩余宽度 */
    overflow: hidden; 
    height: 100vh;
    background: #e0e0e0;
  }
</style>