Как настроить сетку (grid)?

Question

Айрат

html , sass , css

Как настроить сетку (grid)?

Как настроить гриды, чтобы они автоматически переходили на другую строку, если им не хватает места? Вот пример кода, который я хочу улучшить: <br/><br/><pre><code class="css">display: grid;
grid-template-columns: repeat(4, 33.2rem);
grid-template-rows: repeat(auto-fill, 22rem);</code></pre>

17 августа 2024 г. 15:33

Ответы на вопрос 2

Похожие вопросы

Answer 1

Чтобы настроить сетку (grid) таким образом, чтобы элементы автоматически переходили на другую строку, если им не хватает места, вам нужно использовать значение "auto-fill" для функции repeat() в свойстве grid-template-columns. В вашем коде вы уже используете это значение для строк, но забыли применить его к столбцам. 

Вот исправленный код:

```css
display: grid;
grid-template-columns: repeat(auto-fill, 33.2rem);
grid-template-rows: repeat(auto-fill, 22rem);
```

Теперь сетка будет автоматически переходить на новую строку, если элементам не хватает места в одной строке.

Answer 2

.grid {
  grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
}