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

Адаптивная CSS-grid сетка макета в колонку

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

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

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

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

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

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