ZorNet.Ru — сайт для вебмастера » HTML и CSS » Адаптивная сетка без медиа-запросов CSS

Адаптивная сетка без медиа-запросов CSS

Адаптивная сетка без медиа-запросов CSS
В этой материале рассмотрим, как мы можем создавать гибкие компоненты макета адаптивной сетки с помощью CSS и простого функционала для дизайна. Это первое пожалуй многих любимое решение из всех представленных, из-за его универсальности и простоты использования. Используя стилистику CSS мы можем создать адаптивный набор столбцов, которые можно добавлять самостоятельно по мере необходимости.

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

Пример:

Используя Grid, мы можем создать адаптивный набор столбцов

Гибкая разметка сетки при помощи 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, то можно все оригинально оформить, к примеру сделать их отдельно в блоке или на полной страницы, что будет гораздо эффектнее.

Демонстрация
19 Августа 2023 Загрузок: 3 Просмотров: 564 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 0
avatar