Как реализовать monosory на чистом css?
1 ответ
от
hattie ,
6 месяцев назад
@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 задается промежуток между элементами в сетке.
15