Автоматически переносить элементы в 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>