如何按内容制作灵活的栏目？

Question

如何按内容制作灵活的栏目？

在这种情况下，如果一切正常，我需要4列，但在任何情况下，如果列表项比所需的大，我需要创建更少的列。首选唯一的CSS解决方案。逻辑上，这个grid-template-columns: repeat(auto-fill, minmax(min-content, 1fr));表达式应该可以工作，但是最小内容和最大内容不能与"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, minmax(min-content, 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>

​

Answer 1

您是否尝试过在.list元素上使用display: flex，而不是使用网格？设置完成后，您需要为列设置一个min-width属性，并且通过使用flex-wrap: wrap，如果放在一起的项的宽度超过容器的整个宽度，则行可以折叠。