Как ограничить количество столбцов в больших окнах просмотра с помощью CSS Grid и автозаполнения / подгонки? - PullRequest
Новая
       33

Как ограничить количество столбцов в больших окнах просмотра с помощью CSS Grid и автозаполнения / подгонки?

0 голосов
/ 22 ноября 2018

Я начинаю работать с CSS Grid, я читал о свойствах, которые помогают с отзывчивостью;поэтому я пытаюсь построить небольшую сетку из 6 элементов;я хочу, чтобы они отображались в виде двух строк на больших устройствах, таких как:

enter image description here

, а также чтобы показать их все на меньших устройствах, поэтому всехорошо для небольших устройств, я использую auto-fill, поэтому он остается отзывчивым, однако, если я просматриваю страницу на экране ноутбука или настольного компьютера, он может заполнить еще один столбец и в итоге выглядит так:

enter image description here Это мой код компоновки grid. 

display: grid;
grid-template-columns: repeat(auto-fill, 260px);
justify-content: center;
row-gap: 18px;
column-gap: 18px;

Есть ли способ сохранить адаптивное поведение, но также установить максимальное количество столбцов?Любая помощь приветствуется;Если это можно сделать только с помощью медиа-запросов, это нормально, но я сначала пытаюсь найти способы сделать это без их использования.Кроме того, я вроде как заставил его работать как положено, установив горизонтальный padding на весь контейнер сетки, чтобы компенсировать размер дополнительного столбца;но опять же, если есть лучший способ, я все уши.Спасибо!

Рабочий пример https://codepen.io/IvanS95/pen/NEYdxb

Ответы [ 2 ]

0 голосов
/ 23 ноября 2018

Добавьте этот код в свой CSS: 

grid-template-columns: auto auto auto;
0 голосов
/ 23 ноября 2018

Используйте этот синтаксис:

столбцы шаблона сетки: 260px 260px 260px;

Или

grid-template-columns: repeat (3260px);

Вместо этого:

grid-template-columns: repeat (auto-fill, 260px);

Используйте медиазапросы , чтобы установить меньше столбцов на меньших экранах.

Также, если промежуток между строками и столбцами одинаков, вы можете использовать разрыв сетки .

Документация 

.grid-container{
  display: grid;
  grid-template-columns: 260px 260px 260px;
  grid-gap: 18px;
  background-color: #fff;
  color: #444;
  justify-content: center; 
}

.card {
   border: 1px solid #000;
   width: 260px;
   height: 260px;
}
<div class="container">
   <div class="grid-container">
   <div class="grid-item">
      <div class="card"></div>
   </div>
   <div class="grid-item">
      <div class="card"></div>
   </div>
   <div class="grid-item">
      <div class="card"></div>
   </div>
   <div class="grid-item">
      <div class="card"></div>
   </div>
   <div class="grid-item">
      <div class="card"></div>
   </div>
   <div class="grid-item">
      <div class="card"></div>
   </div>
</div>
</div>
...