如何实现一个三栏布局？

要求：左右固定，中间自适应

弹性盒子

html

<div class="container">
  <div class="left">left</div>
  <div class="center">center</div>
  <div class="right">right</div>
</div>

css

.container {
  display: flex;
}

.left {
  flex-shrink: 0;
  flex-basic: 200px;
}

.center {
  flex: 1;
}

.right {
  flex-shrink: 0;
  flex-basic: 200px;
}

网格布局

html

<div class="container">
  <div class="left">left</div>
  <div class="center">center</div>
  <div class="right">right</div>
</div>

css

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  /* 设置高度 */
  /* grid-template-rows: 300px; */
}