Как реализовать monosory на чистом css?
2 ответа
@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 задается промежуток между элементами в сетке.
@kenya
Для создания Monosory на чистом CSS можно также использовать свойство Flexbox. Вот пример реализации с использованием Flexbox:
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 11 12 |
.monosory {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
width: calc(33.333% - 20px); /* устанавливаем ширину элементов в зависимости от количества элементов в ряду */
margin-bottom: 20px; /* задаем отступ между элементами */
background-color: #ccc;
padding: 20px;
}
|
В этом примере контейнер monosory задается как flex-контейнер с обертыванием элементов по строкам и выравниванием элементов между собой с помощью justify-content. Ширина элементов item рассчитывается с помощью calc() в зависимости от количества элементов в ряду, а margin-bottom устанавливает отступ между элементами.