grid/flex布局让孩子一行展示三个、减掉gap后平分宽度

grid

关键：若希望子项实现自动缩放，需要去除宽度相关设置： width、 max-width等

 width: 100%;  /* 改为100%让子项填满分配的网格空间 */

 max-width: none;  /* 移除最大宽度限制 ， 或设置为更大的值 */

 display:grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 24px;

 

flex

flex在应多不规则卡片组时可额外进行居中、等排列方式

.container {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  gap: 24px; /* 间距 */
  justify-content: center; /* 居中排列 */
}

/* 或者使用更精确的计算 */
.card {
  flex: 0 0 calc(33.333% - (24px * 2 / 3));
}