如何通过CSS Grid的wrapper类实现内容居中及文本与表单等宽布局

嘿，作为前端新手能写出这些Grid代码已经很棒啦！我来帮你快速调整出你想要的布局，刚好Grid布局非常适合实现这种左右等宽的结构～

关键调整步骤 #

1. 让Wrapper居中并控制整体宽度 #

首先给你的.wrapper添加居中样式和最大宽度限制，这样页面所有内容就会在屏幕中间显示，不会撑满整个宽屏：

.wrapper {
  display: grid;
  grid-gap: 20px;
  border: 1px solid red;
  max-width: 1200px; /* 可根据设计需求调整这个宽度值 */
  margin: 0 auto; /* 实现水平居中 */
  padding: 0 20px; /* 小屏幕下侧边留些留白，提升体验 */
}

2. 让文本区域与表单区域等宽 #

你已经用到了Grid的模板区域，只需要补充grid-template-columns设置为1fr 1fr，就能让两列自动等宽，同时注意修正模板区域的名称和类名保持一致：

.hero {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列宽度等分 */
  grid-template-areas: "hero-text hero-form"; /* 这里要和下方类名的grid-area对应哦 */
  gap: 20px; /* 两列之间的间距，可按需调整 */
}

.hero-text {
  grid-area: hero-text;
  border: 1px solid green;
}

.hero-form {
  grid-area: hero-form; /* 之前你写的是hero-video，要和模板区域名称统一 */
  border: 1px solid green;
}

3. 可选：优化导航栏布局 #

如果你的导航栏需要让logo和其他导航项对齐，可以给.navbar补充简单的Grid设置：

.navbar {
  display: grid;
  grid-template-columns: auto 1fr; /* logo占自身宽度，剩余空间给导航内容 */
  align-items: center; /* 让logo和导航项垂直居中 */
}

这样调整后，你的页面就会实现：所有内容通过wrapper居中显示，hero区域的文本和表单保持等宽，完美匹配你参考图的布局啦～

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