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

 

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

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

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

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