如何按内容制作灵活的列？

问题描述

如何按内容制作灵活的列？

在这种情况下，如果一切正常，我需要4列，但是在任何情况下，如果列表项大于所需的列数，则我需要减少列数。只喜欢CSS解决方案。 符合逻辑的是，该grid-template-columns: repeat(auto-fill,minmax(min-content,1fr));表达式应该起作用，但是min-content和max-content不适用于“ fr”单位。

.parent {
  display: flex;
}

.wrapper {
  width: 450px;
  padding: 15px;
  margin: 0 auto;
  box-sizing: border-box;
  background-color: #d4d1d1;
}

.wrapper:first-child {
  background-color: #cc8b8b;
}

.list {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(4,1fr);
  // grid-template-columns: repeat(auto-fill,25%));
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 1px dashed green;
}

.list__item {
  display: flex;
  flex-direction: column;
  list-style: none;
  align-items: center;
  text-align: center;
  border: 1px solid black;
}

.list__item-img {
  width: 91px;
  height: 91px;
  background-color: #eaeaea;
}

<div class="parent">
  <div class="wrapper">
    <ul class="list">
      <li class="list__item">
        <div class="list__item-img"></div>
        <span class="list__item-caption">Lorem</span>
      </li>
      <li class="list__item">
        <div class="list__item-img"></div>
        <span class="list__item-caption">Lorem</span>
      </li>
      <li class="list__item">
        <div class="list__item-img"></div>
        <span class="list__item-caption">Lorem</span>
      </li>
      <li class="list__item">
        <div class="list__item-img"></div>
        <span class="list__item-caption">Lorem</span>
      </li>
      <li class="list__item">
        <div class="list__item-img"></div>
        <span class="list__item-caption">Lorem</span>
      </li>
      <li class="list__item">
        <div class="list__item-img"></div>
        <span class="list__item-caption">Lorem</span>
      </li>
      <li class="list__item">
        <div class="list__item-img"></div>
        <span class="list__item-caption">Lorem</span>
      </li>
      <li class="list__item">
        <div class="list__item-img"></div>
        <span class="list__item-caption">Lorem</span>
      </li>
      <li class="list__item">
        <div class="list__item-img"></div>
        <span class="list__item-caption">Lorem</span>
      </li>
    </ul>
  </div>

  <div class="wrapper">
    <ul class="list">
      <li class="list__item">
        <div class="list__item-img"></div>
        <span class="list__item-caption">Very/long/word</span>
      </li>
      <li class="list__item">
        <div class="list__item-img"></div>
        <span class="list__item-caption">Very/long/word</span>
      </li>
      <li class="list__item">
        <div class="list__item-img"></div>
        <span class="list__item-caption">Very/long/word</span>
      </li>
      <li class="list__item">
        <div class="list__item-img"></div>
        <span class="list__item-caption">Very/long/word</span>
      </li>
      <li class="list__item">
        <div class="list__item-img"></div>
        <span class="list__item-caption">Very/long/word</span>
      </li>
      <li class="list__item">
        <div class="list__item-img"></div>
        <span class="list__item-caption">Very/long/word</span>
      </li>
      <li class="list__item">
        <div class="list__item-img"></div>
        <span class="list__item-caption">Very/long/word</span>
      </li>
      <li class="list__item">
        <div class="list__item-img"></div>
        <span class="list__item-caption">Very/long/word</span>
      </li>
      <li class="list__item">
        <div class="list__item-img"></div>
        <span class="list__item-caption">Very/long/word</span>
      </li>
    </ul>
  </div>
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）