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

Адаптивный макет сетки на CSS Grid

В статье узнаете, как можно создать адаптивный макет сетки, который идет без @media запросом, где задействован стиль CSS Grid под все размеры. А если просто, то идет полностью адаптивная сетка, где не нужно ставить @media для корректной работы во всех окнах просмотра, и как понимаете, все это благодаря CSS Grid. Задействование веб-дизайна дает гибкий и внешние вид, который при заданных размеров даем элементам границы, где автоматически происходит заполнение.

Что делает CSS выше, так это размещает элементы сетки с фиксированной минимальной шириной. Затем он расширяется, чтобы заполнить оставшееся доступное пространство, где это возможно, потому что мы используем фрактальную единицу "1fr" для значения максимальной ширины.

Оставшееся доступное пространство распределяется поровну между элементами внутри auto-grid, поэтому используя 1fr в качестве максимального значения для каждого элемента, мы используем x% оставшееся доступное пространство на элемент. Это означает, что если имеется 10 элементов, где x это равно 10% оставшегося свободного места. Вот так мы получаем такую гибкость с легкой приправой абсолютного контроля.

Сами блоки могут идти под разной гаммой цвета, где изначально все проверено на адаптивность, и корректно выводит на большом мониторе, и аналогично на небольшом экране, только со смены с горизонтального вида на вертикальный. Где также производится эффект, если несколько карточек установлено, то на одну наводишь, то следующие становятся мало заметными.

CSS Grid идеально подходит для адаптивной верстки

Установочный процесс:

HTML

Код

<ul class="asingakub-gesoupem">
  <li class="kartochka">Первая карта</li>
  <li class="kartochka">Вторая карта</li>
  <li class="kartochka">Третья карта</li>
  <li class="kartochka">Четвертая карта</li>
  <li class="kartochka">Пятая карта</li>
  <li class="kartochka">Шестая карта</li>
</ul>

CSS

Код

.asingakub-gesoupem {
  --auto-grid-min-size: 16rem;

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
  grid-gap: 2rem;
  margin: 1rem;
  padding-left: 0;
  pointer-events: none;
  text-align: center;
}

.asingakub-gesoupem > * {
  box-shadow: 0 2px 28px rgba(109, 109, 109, 0.36);
  border-radius: 5px;
  cursor: pointer;
  pointer-events: auto;
  transition: 300ms opacity, 300ms transform;
}

.asingakub-gesoupem:hover > *,
.asingakub-gesoupem:focus-within > * {
  opacity: 0.4;
}

.asingakub-gesoupem:hover > *:hover,
.asingakub-gesoupem:focus-within > *:focus {
  transform: scale(1.1);
  opacity: 1;
}

.asingakub-gesoupem:hover > :focus:not(:hover) {
  transform: scale(1.05);
}

.kartochka {
  background: #cd55da;
  color: #fbf9f9;
  list-style: none;
  padding: 4.8rem 1.2rem;
  border: 2px solid #cac3c3;
  text-shadow: 0 1px 0 #737171;
  font-size: 17px;
}

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

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

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

Демонстрация

18 Июля 2019 Загрузок: 1 Просмотров: 1288 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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