如何实现多行可变宽度元素对齐？行末元素自动填充剩余空间

问题说明 #

需要实现一个多行元素布局，要求：

• 每行最多容纳4个元素，优先填满当前行再换行；
• 非行末元素宽度完全适配自身内容；
• 行末元素自动填充该行剩余空间，哪怕内容很短。

当前使用flex布局的代码出现问题：最后一行的两个元素各占50%宽度，不符合预期。

代码实现 #

CSS 代码 #

.container {
  display: grid;
  /* 前3列宽度适配内容，第4列填充剩余空间 */
  grid-template-columns: auto auto auto 1fr;
  gap: 20px; /* 替代margin，更简洁控制元素间距 */
  width: 100%;
  max-width: 1200px;
}

.item {
  background-color: #3498db;
  color: white;
  padding: 20px;
  border-radius: 5px;
  text-align: left;
  box-sizing: border-box;
}

/* 处理最后一行元素不足4个的情况 */
/* 最后一行只有1个元素时，跨4列填充整行 */
.item:nth-last-child(1):nth-child(4n+1) {
  grid-column: span 4;
}

/* 最后一行有2个元素时，最后一个元素跨3列填充剩余空间 */
.item:nth-last-child(1):nth-child(4n+2) {
  grid-column: span 3;
}

/* 最后一行有3个元素时，最后一个元素跨2列填充剩余空间 */
.item:nth-last-child(1):nth-child(4n+3) {
  grid-column: span 2;
}

HTML 代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Layout</title>
</head>
<body>

<div class="container">
    <div class="item">Item 1 data is here, plrase askjd sadsad asd </div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2adm </div>
    <div class="item">Item 2 san. asmd. sada sdndsa m sad </div>
</div>

</body>
</html>

原理说明 #

• grid-template-columns: auto auto auto 1fr：定义每行4列布局，前3列宽度由元素内容自动决定，第4列通过1fr占据该行剩余的所有空间；
• gap:20px：统一设置元素间的水平和垂直间距，避免使用margin时需要计算边距叠加的问题；
• 三个伪类选择器分别处理最后一行元素数量为1、2、3的场景，通过grid-column: span N让行末元素占据剩余的列数，从而自动填充该行的剩余空间。

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