我想写一个圣杯布局 你能帮我吗

当然可以帮助你写一个圣杯布局。以下是一个基本的圣杯布局的HTML和CSS代码示例：

HTML代码：

<div class="container">
  <div class="column column1">Left Sidebar</div>
  <div class="column column2">Main Content</div>
  <div class="column column3">Right Sidebar</div>
</div>

CSS代码：

.container {
  display: flex;
  min-height: 100vh;
}

.column {
  flex: 1;
  padding: 20px;
}

.column1 {
  order: 1;
  background-color: lightblue;
}

.column2 {
  order: 2;
  background-color: lightgray;
}

.column3 {
  order: 3;
  background-color: lightgreen;
}

@media (min-width: 768px) {
  .column1 {
    order: 1;
    flex: 0 0 200px;
  }

  .column2 {
    order: 2;
    flex: 1;
  }

  .column3 {
    order: 3;
    flex: 0 0 200px;
  }

  .container {
    margin: 0 220px;
  }
}

这段代码实现了一个具有左边栏、主要内容和右边栏的圣杯布局。在较小的屏幕上，三列会按照从上到下的顺序堆叠显示。在宽度达到768像素以上时，左右两个边栏将位于主要内容的两侧。

你可以根据自己的需求调整CSS样式或添加其他元素。希望这对你有所帮助