如何用css网格修复文章？

<div class="grid-container">
  <div class="header">文章标题</div>
  <div class="sidebar">侧边栏</div>
  <div class="content">文章内容</div>
  <div class="footer">页脚</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* 两列，比例为1:2 */
  grid-template-rows: auto 1fr auto; /* 三行，第一行自适应内容，第二行占剩余空间，第三行自适应内容 */
  grid-gap: 10px; /* 单元格之间的间距 */
}

.header {
  grid-column: 1 / span 2; /* 横跨两列 */
}

.sidebar {
  grid-column: 1; /* 占第一列 */
}

.content {
  grid-column: 2; /* 占第二列 */
}

.footer {
  grid-column: 1 / span 2; /* 横跨两列 */
}