如何将HTML表单连接Google Sheets？CSS Grid动态列数避免滚动空白

• 创建Google Sheets表格，在第一行添加与表单字段对应的表头（如「姓名」「邮箱」「留言内容」等）。
• 打开Google Apps Script，新建脚本文件，替换默认代码为以下提交处理脚本：

function doPost(e) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
  const newRow = headers.map(header => e.parameter[header]);
  sheet.appendRow(newRow);
  return ContentService.createTextOutput(JSON.stringify({status: "success"})).setMimeType(ContentService.MimeType.JSON);
}

• 保存脚本后，部署为Web应用：选择「部署」→「新建部署」，类型选「Web应用」，执行权限设为「我自己」，访问权限设为「任何人，甚至匿名」，复制生成的Web应用URL。
• 编写HTML表单，通过POST方法提交到上述URL，注意表单字段的name属性需与Sheets表头完全一致，示例代码：

<form id="googleForm" method="POST">
  <input type="text" name="姓名" placeholder="姓名" required>
  <input type="email" name="邮箱" placeholder="邮箱" required>
  <textarea name="留言内容" placeholder="请输入留言"></textarea>
  <button type="submit">提交</button>
</form>
<script>
  document.getElementById('googleForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const response = await fetch('你的Web应用URL', {
      method: 'POST',
      body: formData
    });
    const result = await response.json();
    alert(result.status === 'success' ? '提交成功' : '提交失败');
  });
</script>

• 注意：部署时若提示授权，需按指引完成权限授予；表单字段name与表头的大小写、名称必须严格匹配。

使用auto-fit结合minmax()替代固定的repeat(3)，同时通过媒体查询控制不同宽度下的表现，具体代码如下：

.grid-container {
  display: grid;
  /* 默认场景：自动适配列数，列宽最小300px，剩余空间平分，超出换行 */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

/* 视口宽度≥1000px时：横向滚动+动态列数 */
@media (min-width: 1000px) {
  .grid-container {
    /* 按内容数量生成列，列宽最小300px，超出时自适应 */
    grid-template-columns: repeat(auto-fit, minmax(300px, auto));
    overflow-x: auto;
    /* 容器宽度贴合内容，避免强制撑开产生空白 */
    width: fit-content;
    max-width: 100%;
  }
}

• 原理：auto-fit会根据内容数量自动调整列数，不会强制生成固定3列；width: fit-content让容器宽度跟随内容宽度变化，仅当内容总宽度超过容器最大宽度时才显示横向滚动条，彻底解决空白滚动区域问题。
• 可选调整：若需要固定列宽，将minmax(300px, auto)改为固定值（如300px），即可实现固定宽度的动态列数效果。

内容的提问来源于stack exchange，提问作者Hukam