CSS Grid如何根据自身容器控制一行展示得元素个数

Question

最近在小程序上使用grid遇到了一个问题：

此处的css代码是这么写的：

.size_list_cont{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 15rpx;
  grid-row-gap: 30rpx;
}

请问大佬如何根据子元素自动控制repeat的个数啊，我试了将4改成了auto-fill，将1fr改成了minmax(),但是实际效果还是不行，请问大佬们是否有更好的解决方案=。=

Answer 1

CSS Grid是一种先布局栅格，后在栅格内填充内容的布局方式。看你的情况其实是想每个格子都一样宽，同时里面的文字不换行是吧，用flex比较合适。

.size_list_cont {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-top: -30px;
}

.size_list_cont > * {
  flex-grow: 1;
  flex-shrink: 0;
  margin-left: 15px;
  margin-top: 30px;
  white-space: nowrap;
}

Answer 2

grid-template-columns: repeat(auto-fill, minmax(...px, 1fr));