¿Por qué el ajuste automático o el llenado automático no funcionan correctamente con minmax?

Question

Jul 30, 2018, 03:21 PM

¿Por qué el ajuste automático o el llenado automático no funcionan correctamente con minmax?

No funciona correctamente cuando agrego autoajuste o autocompletado en lugar de un número.

 grid-template-columns: repeat(auto-fit, minmax(max-content, max-content));

Pero funciona correctamente cuando agrego un número en lugar de max-content.

grid-template-columns: repeat(auto-fit, minmax(50px, max-content));

Pero quiero que el tamaño de la cuadrícula sea el mismo (estar en forma) que el tamaño del contenido. Me gusta esto

grid-template-columns: repeat(30, minmax(max-content, max-content));

(usando auto-fit o auto-fill). ¿Cómo puedo hacer eso

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(max-content, max-content));
 grid-gap: 10px;
}

li {
  list-style: none;
}

<body>
    <nav>
      <ul>
        <li>lorem ipsum</li>
        <li>dolor sit</li>
        <li>amet</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
      </ul>
    </nav>
  </body>