如何调整CSS Grid布局中首个自动列的宽度，实现三列50%/25%/25%占比

解决方案 #

你要实现的50%、25%、25%三列比例，无需用常规CSS强行覆盖宽度，直接调整Grid的列模板规则即可，共有两种常用实现方式：

方案1：直接声明列宽比例（最简单）

你原来的grid-template-columns: repeat(3, 1fr)是将容器等分为3列，每列占1/3宽度，不符合你的比例需求，直接修改该属性即可：

.slider-cards {
  display: grid;
  /* 总共有4份fr单位，第一列占2份=50%，后两列各占1份=各25%，会自动扣除gap间距再做比例分配，不会出现溢出问题 */
  grid-template-columns: 2fr 1fr 1fr;
  grid-gap: 20px;
  margin-bottom: 40px;
}

方案2：保留repeat语法，通过跨列实现

如果需要用repeat声明列模板，你可以将最小拆分单位设为1fr重复4次，再给第一个卡片设置跨2列即可，效果和方案1完全一致：

.slider-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
  margin-bottom: 40px;
}
/* 第一个卡片跨2列 */
.slider-cards .first {
  grid-column: span 2;
}

两种方案都可以完美实现你要的布局效果，不需要修改其他现有CSS和HTML结构。

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