CSS Grid автоматически подгоняется и мин-макс оставляет пробелы - PullRequest
Новая
       13

CSS Grid автоматически подгоняется и мин-макс оставляет пробелы

0 голосов
/ 17 февраля 2019

Я использую CSS Grid для настройки следующей структуры: enter image description here Однако, когда я изменяю размер моего окна просмотра, структура деформируется: Deformed Structure

Я пытался использовать grid-template-columns: repeat(auto-fit, minmax(200px,1fr)), чтобы исправить проблему, надеясь, что автоматическая подгонка займет оставшиеся пробелы справа от «Что случилось?» И слева от «SHSAT Blues».Я подозреваю, что минимальная ширина 200px может быть причиной, потому что для браузера, чтобы разместить еще один div справа от «What Случилось?», Трек может потребовать ширину менее 200px.Таким образом, я изменил 200px на auto, но это не помогло решить проблему. 

.container{
    display:grid;
    width:100%;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
    grid-gap:30px;
}

.item{
    background-color:#FFC300;
}

.item-1{
    grid-column:1/-1;
}

.item-4{
    grid-column:3/5;
}

.item-5{
    grid-column:1/4;
}

.item-8{
    grid-column:2/4;
}

Полный код @ https://codepen.io/Refath/pen/Odaovw?editors=1100 Я ожидал, что свойства auto-fit и min-max сделают мою CSS Gridполностью отзывчивый, но я не понимаю, где я ошибся.Благодарю.

1 Ответ

0 голосов
/ 17 февраля 2019

Ну, у вас есть селекторы для элементов 1,4,5 и 8. То есть вы указываете, в каких строках, столбцах и т. Д. Вы хотели бы, чтобы они были. Почему бы не включить это для всех элементов, чтобы вы могли вручную разместитьих?Это займет всего несколько минут.

Если вы измените размер экрана, они также переместятся, поскольку только некоторые из них имеют определенное место, поэтому, возможно, попробуйте использовать медиа-запросы для решения этой проблемы.Создание CSS-таблиц для экранов разных размеров может занять некоторое время, но это решит проблему и будет отлично смотреться.

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

...