Grid布局尺寸异常求助：2×2网格未按预期占比显示

问题根源 #

你的2×2网格列宽被挤压的核心原因有三个：

1. 最外层网格容器.shop-page-grid未设置宽度限制，导致它被内部子元素（尤其是R2区域）的超大间距和内边距无限撑开，1fr:2fr的比例虽然正确，但容器宽度远超页面，视觉上左侧列显得异常狭窄。
2. .R2和内部的.image-grid重复设置了Grid布局，嵌套层级冗余，导致布局计算混乱。
3. .R2的gap:200px和.product的padding-right:220px设置了过大的间距/内边距，直接撑大了整个容器的宽度。

修复方案 #

1. 给最外层网格容器添加宽度限制，确保它占满页面可用宽度：

   .shop-page-grid {
     display: grid;
     grid-template-columns: 1fr 2fr;
     gap: 0;
     border: 1px solid #888;
     width: 100%; /* 让容器占满页面宽度 */
     box-sizing: border-box; /* 避免边框和内边距撑开容器 */
   }
   

2. 清理R2区域的冗余Grid布局和超大间距：

   • 删除.R2的display: grid;、grid-template-columns: repeat(3, 1fr);和gap: 200px;样式
   • 删除.product的padding-right: 220px;样式
   • 给.image-grid设置合理的间距，比如gap: 20px;

3. 调整产品项的布局，让内容对齐更合理：
   给.product添加flex-direction: column;，让产品图片、名称、价格和评分垂直排列，避免水平挤压。

修改后的完整CSS代码 #

.shop-page-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0;
  border: 1px solid #888;
  width: 100%;
  box-sizing: border-box;
}

.L1,
.R1,
.L2,
.R2 {
  border: 1px solid #888;
}

.R1,
.L2,
.R2 {
  padding: 20px;
  box-sizing: border-box;
}

.L1 img,
.R2 img {
  width: 100%;
  height: auto;
}

.R1 .newsletter-content {
  text-align: left;
}

form {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* 小屏幕下表单自动换行 */
}

form label {
  margin-right: 10px;
}

form input {
  max-width: 200px;
}

form button {
  margin-left: 10px;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px; /* 调整为合理间距 */
}

.image-grid img {
  width: 100%;
  height: auto;
}

.browse-all-button {
  background-color: #007bff;
  color: #fff;
  padding: 10px;
  border: none;
  cursor: pointer;
  margin-top: 15px;
}

.image-grid .small-image {
  width: 100%;
  max-width: 150px;
  height: auto;
  border-radius: 8px;
}

/* 移除R2的冗余Grid样式 */
.R2 {
  /* 原Grid相关样式已删除 */
}

.product {
  display: flex;
  flex-direction: column; /* 改为垂直排列 */
  align-items: center;
  text-align: center; /* 文字居中 */
}

.product img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-right: 0; /* 移除水平间距 */
  margin-bottom: 10px; /* 添加图片和文字的垂直间距 */
}

.product-info {
  flex-grow: 1;
}

.product h4,
.product p {
  margin: 5px 0;
}

.star-rating {
  display: flex;
  justify-content: center;
  align-items: center;
}

.fa-star.checked {
  color: gold;
}

.fa-star {
  color: #ccc; /* 把白色改为灰色，避免在白色背景下看不见 */
}

效果说明 #

修改后，最外层网格会严格按照1fr:2fr的比例分配宽度（左侧占1/3，右侧占2/3），产品区域的布局更紧凑合理，不会再撑大容器导致列宽异常。

内容的提问来源于stack exchange，提问作者P-ellen