Создание адаптивной сетки CSS

13 апреля 2021

Для адаптивности я обычно использую Bootstrap. На мой взгляд он удобен и имеет множество предустановленных плюшек. Но бывают случаи, когда нужно в чужую верстку добавить адаптивную сетку. Для этого у меня вот такое примитивное, но рабочее решение 

CSS

.i_block {float:left; width:20%;}
.row-flex {display:flex; flex-flow: row wrap;}
/* TABLET */
@media screen and (min-width: 760px) and (max-width: 1024px) {
.i_block {width: 33.33333%;}
}
/* MOBILE */
@media screen and (max-width: 760px) {
.i_block {width:50%;}
}

HTML

<div class="row-flex">
    <div class="i_block">
        содержимое блока
    </div>
</div>

Понятное дело, что @media и проценты ширины подгонять под свои нужды.