Как реализовать monosory на чистом css?

Пользователь

от kenya , в категории: HTML/CSS , месяц назад

Как реализовать monosory на чистом css?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от hattie , месяц назад

@kenya 

Monosory в CSS можно реализовать, используя свойство grid. Вот пример реализации:


HTML:

1
2
3
4
5
6
7
8
<div class="monosory">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
</div>


CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
.monosory {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 20px;
}

.item {
  background-color: #ccc;
  padding: 20px;
}


В этом примере создается сетка с автоматическим количеством столбцов. Количество столбцов будет определяться шириной контейнера и шириной элементов. С помощью grid-gap задается промежуток между элементами в сетке.