it-roy-ru.com

Установка минимального и максимального количества столбцов с помощью CSS Grid

У меня есть 10 div (64px x 64px), которые я хочу отобразить максимум в 5 столбцах (для больших и очень больших видовых экранов) и минимум в 3 столбца (для небольших видовых экранов, таких как iPhone 7 и т.д.).

Я пытаюсь сделать это с помощью CSS Grid, но не могу выполнить минимальную часть столбцов (она идет до 2 столбцов, даже если есть место для 3 столбцов).

body {
  background-color: wheat;
}

.parent {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(100px, 140px));
  max-width: 800px;
}

.child {
  height: 64px;
  width: 64px;
  background-color: brown;
}
<body>
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</body>

Максимальная ширина контейнера сетки составляет 800 пикселей.

Вот ссылка для Codepen

Правка: если возможно, я хочу сделать это только с помощью CSS Grid, т.е. без использования Media Queries или Flexbox.

9
Sumit Bagga

вы можете получить требуемый вывод, используя запрос @media, используемый grid-template-columns: repeat(5, 1fr); для большого устройства и grid-template-columns: repeat(3, 1fr); для небольшого устройства 

body {
  background-color: wheat;
}

.parent {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(5, 1fr);  
}

.child {
  height: 64px;
  width: 64px;
  background-color: brown;
}

@media(max-width:540px){
  .parent {
     grid-template-columns: repeat(3, 1fr);
  }
}
<body>
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</body>

1
SantoshK

Я думаю, что это вы ищете.

body {
  background-color: wheat;
}

.parent {
  display: grid;
  grid-gap: 2vw;
  grid-template-columns: repeat(auto-fill, minmax(100px, 120px));
  max-width: 800px;
}

.child {
  height: 64px;
  width: 64px;
  background-color: brown;
}
<body>
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</body>

Я изменил - с grid-template-columns: repeat(auto-fill, minmax(100px, 140px)); на grid-template-columns: repeat(auto-fill, minmax(100px, 120px));

Поскольку при небольшом размере экрана дочерний элемент будет занимать зарезервированную область 140px, в результате чего он будет разбит на 2 столбца на маленьком экране, теперь я изменил его на 120px и grid-gap: 2vw;, чтобы устранить эту проблему.

Я надеюсь, что это было полезно для вас.

0
weBBer

Не уверен, если вы не возражаете против изменчивых столбцов, но используя медиазапросы, вы можете сделать следующее:

.parent { grid-template-columns: repeat(3, 1fr); } для маленьких экранов

а также

.parent { grid-template-columns: repeat(5, 1fr); } для больших экранов

0
Frish