Автоматически переносить элементы в grid, в зависимости от ширины элемента

Есть возможность автоматически переносить элементы в гриде, в зависимости от ширины элемента (grid-wrap или что-то подобное)? Все, что удалось найти это - grid-template-columns: repeat(auto-fill, 100px), но это не работает.

.main {
  max-width: 800px;
  margin: 0 auto;
  padding: 30px 15px;
}

.main__form {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  max-width: 578px;
  margin: 0 auto;
  gap: 1rem;
}

.main__input {
  border: 1px solid #d5d4d8;
  padding: 10px;
}

.main__btn {
  grid-column: 1 / 3;
  margin: 0 auto;
  width: fit-content;
}
<main class="main">
  <form class="main__form">
    <input class="main__input" type="text" placeholder="top text" />
    <input class="main__input" type="text" placeholder="bottom text" />
    <button class="main__btn" type="button">
      Get a new image
    </button>
  </form>
</main>


Ответы (0 шт):