CSS Grid 如何实现1fr 1fr 3fr列宽每行3列自适应换行（无需媒体查询）

核心思路 #

保留原有基于auto-fill的基础自动折行能力，通过子元素的跨列规则、强制换行规则，实现固定列比例、最大列数限制的要求，全程不需要媒体查询、不需要配置grid-template-areas。

调整后代码 #

.grid {
  display: grid;
  /* 保留原有的自动列逻辑，根据容器宽度自动生成最小200px的等宽轨道 */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.grid>div {
  background: #EDE7F6;
  padding: 1.5rem;
  border-radius: 1rem;
}

/* 每三个元素为一组：第三个元素跨3列，实现3fr的宽度比例 */
.grid>div:nth-child(3n) {
  grid-column: span 3;
}

/* 每组的第一个元素强制从第一列开始排列，保证每行最多3个元素 */
.grid>div:nth-child(3n + 1) {
  grid-column-start: 1;
}

body {
  margin: 2rem;
  font: 12px system-ui;
}

<div class="grid">
  <div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse aliquid laboriosam minima ex praesentium recusandae reprehenderit unde sit tempore atque aut commodi quae expedita corrupti, dignissimos architecto. Eius, maiores ad?</div>
  <div>Quibusdam, eos esse dolorum facere voluptatem eius, dolore quas totam aspernatur obcaecati harum? Nihil eligendi eos minus odit minima earum incidunt rem fugit reprehenderit, molestiae possimus eveniet itaque laudantium excepturi.</div>
  <div>Ducimus quibusdam inventore delectus doloribus dignissimos. Dignissimos quos officia minus exercitationem perspiciatis harum iusto molestiae deleniti quod sunt amet recusandae autem, neque doloremque ad alias eaque consequuntur nesciunt quis eius!</div>
  <div>Cumque aspernatur ex ipsum dolorum eius, tempore omnis minus sequi architecto totam sunt maxime nemo, ab repellendus. Aut voluptatem saepe voluptatibus nisi ipsum. Debitis corporis culpa ipsa error nemo doloribus.</div>
  <div>Consequatur dolore, architecto quos saepe consequuntur libero minus totam? Enim optio provident commodi corporis officiis, sunt maiores? Cupiditate consequuntur, cumque natus corporis velit sunt ad magni aliquid facere deleniti molestiae.</div>
  <div>Voluptatibus similique modi voluptatum voluptatem quo quod minima ducimus facere, sequi libero accusamus nisi nobis? Minima error tempore quo esse quod odit, deleniti labore nulla ullam velit nemo neque sint!</div>
  <div>Qui, corporis delectus? Pariatur vel autem commodi, accusantium, voluptate obcaecati iste, a debitis facilis repellendus mollitia. Dolore dicta totam, quaerat omnis accusantium magni alias voluptates eligendi ex id aut dolorem?</div>
  <div>Recusandae tempora ab error omnis exercitationem illo accusamus esse sit ipsa accusantium iure, possimus ducimus quis consequuntur qui corporis nobis culpa repudiandae! Suscipit, debitis. Omnis delectus at vitae laborum quos?</div>
  <div>Dolorem saepe accusamus sed placeat porro ex, ab, vel eaque libero incidunt facilis delectus, iure odio dicta error consequuntur perspiciatis quasi? Corrupti incidunt quia asperiores quo magnam at minima laudantium?</div>
  <div>Dolor ad saepe, nemo fugit tempora autem est fugiat quis porro atque nam repellendus maxime neque voluptatem rerum amet odit aspernatur voluptates iusto eos laboriosam enim vel. Eius, debitis beatae!</div>
</div>

实际效果说明 #

• 宽屏场景：当容器宽度足够容纳5个最小200px的轨道（含间隙约1064px宽度）时，同组的三个元素会排在同一行，前两个元素各占1份弹性空间，第三个元素占3份弹性空间，实现1fr 1fr 3fr的比例效果。
• 中等宽度场景：当容器宽度不足以放下整组三个元素的总宽度时，需要跨3列的第三个元素会因为当前行剩余空间不足，自动移至新行显示、占满整行宽度，前两个元素留在上一行各占一半宽度。
• 窄屏场景：当容器宽度仅能放下1个最小200px的轨道时，所有元素会自动排成单列，占满整行宽度。

自定义调整提示 #

• 基础轨道的最小宽度可以根据需求修改minmax()里的200px参数，跨列规则不需要调整。
• 如果需要修改第三列的宽度比例，直接修改nth-child(3n)的span值即可：比如要实现2fr的比例就设置span 2，4fr的比例就设置span 4，因为基础轨道是等宽的，跨列数和弹性比例完全对应。

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