Адаптивная сетка без медиа-запросов CSS
В этой материале рассмотрим, как мы можем создавать гибкие компоненты макета адаптивной сетки с помощью CSS и простого функционала для дизайна. Это первое пожалуй многих любимое решение из всех представленных, из-за его универсальности и простоты использования. Используя стилистику CSS мы можем создать адаптивный набор столбцов, которые можно добавлять самостоятельно по мере необходимости.
Все что нужно для создания адаптивного макета сетки, где нужно установить минимальный размер столбца при помощью вспомогательного пользовательского свойства. Для чего вообще нужны такие сетки, здесь мнение могут расходится, ведь по мне, это отличный навигатор, который можно доработать, где при открытие страницы появятся красиво исполненные по стилистике запросы. А также все корректно показывает на мобильном устройстве, что не мало важно.
Пример:
Гибкая разметка сетки при помощи HTML + CSS
Установка:
HTML
Код
<ul class="avtosetka">
<li>Блок 1</li>
<li>Блок 2</li>
<li>Блок 3</li>
<li>Блок 4</li>
<li>Блок 5</li>
<li>Блок 6</li>
<li>Блок 7</li>
<li>Блок 8</li>
<li>Блок 9</li>
<li>Блок 10</li>
<li>Блок 11</li>
<li>Блок 12</li>
</ul><ul class="avtosetka">
<li>Блок 1</li>
<li>Блок 2</li>
<li>Блок 3</li>
<li>Блок 4</li>
<li>Блок 5</li>
<li>Блок 6</li>
<li>Блок 7</li>
<li>Блок 8</li>
<li>Блок 9</li>
<li>Блок 10</li>
<li>Блок 11</li>
<li>Блок 12</li>
</ul>
CSS
Код
.avtosetka {
--auto-grid-min-size: 16rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
grid-gap: 1rem;
}
/* Презентационные стили*/
body {
background: #efefef;
padding: 1rem;
line-height: 1.4;
font-family: sans-serif;
}
li {
padding: 4rem 1.4rem;
text-align: center;
font-size: 1.2rem;
background: #af302e;
color: #efe8e8;
}
Вы можете задействовать данную сетку или карточки под любое направление сайта, где они отлично впишутся под различную тематику. Если знаете немного CSS, то можно все оригинально оформить, к примеру сделать их отдельно в блоке или на полной страницы, что будет гораздо эффектнее.
Демонстрация
Скачать Адаптивная сетка без медиа-запросов CSS
