在CodePen中使用React完成CSS Grid挑战遇布局问题求助

嘿，我来帮你搞定这个问题！你已经完成了主内容跨列的部分，现在要让aside固定150px同时保证网格容器对齐，只需要调整grid-template-columns的设置，并优化容器的显示类型就行，具体步骤如下：

关键修改点 #

• 把grid-template-columns: auto auto改成150px 1fr：150px直接固定aside所在列的宽度，1fr是CSS Grid的分数单位，会自动占据容器剩余的所有空间，让主内容列自适应视口宽度。
• 将display: inline-grid换成display: grid（或保留inline-grid但添加width: 100%）：inline-grid是行内元素，默认宽度由内容决定，换成块级的grid再配合width: 100%，能让容器撑满整个视口，解决对齐问题。
• 可选：重置html/body的默认边距，避免容器和视口边缘出现间隙。

修改后的完整样式代码 #

/* 重置默认样式，消除不必要的间距 */
html, body {
  margin: 0;
  padding: 0;
}

.grid-container {
  border: 2px dashed goldenrod;
  display: grid;
  padding: 10px;
  grid-template-columns: 150px 1fr; /* 固定aside列宽，主内容自适应 */
  height: 100vh;
  grid-gap: 30px;
  width: 100%; /* 确保容器占满视口宽度 */
}

效果说明 #

这样修改后，aside所在的网格列会固定保持150px宽度，主内容列会自动填满剩余的视口空间，同时网格容器会完全贴合视口边缘，不会出现对齐偏移的问题。如果你的aside是放在第二列，只需要把grid-template-columns改成1fr 150px就行~

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