CSS Grid 如何固定第一列宽度？需设为60px其余列用1fr

直接修改grid-template-columns属性即可实现需求，调整后的代码如下：

.wrapper-portfolio {
  margin-top: 5px;
  display: grid;
  /* 第一列固定60px，剩余6列平分容器剩余宽度 */
  grid-template-columns: 60px repeat(6, 1fr);
  gap: 2px;
  grid-template-rows: 1fr min-content;
}

补充说明 #

• 原代码中repeat(7, 1fr)是让7列完全平分容器宽度，现在拆分后，第一列直接指定固定宽度60px，剩下的6列用repeat(6, 1fr)平分容器剩余空间，刚好匹配你7列的布局结构。
• 为了避免图标因内边距、边框等因素超出列宽，建议给第一列的图标元素加上盒模型设置：

.wrapper-portfolio .icon {
  box-sizing: border-box;
  width: 60px;
  height: 60px;
}

相关搜索关键词 #

• 中文：CSS Grid 固定单列宽度、CSS Grid 混合固定与弹性列宽
• 英文：CSS Grid fixed width first column、CSS Grid grid-template-columns fixed and fr

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