ZorNet.Ru — сайт для вебмастера » HTML и CSS » Адаптивная сетка с помощью чистого CSS Grid

Адаптивная сетка с помощью чистого CSS Grid

Полностью настраиваемая адаптивная сетка, которая построена на чистом CSS, где она корректно просматривается на разных мобильных устройствах. Это показывает нам, что здесь совершенно не нужно прописывать миллион медиа-запросов, все для того, чтобы кардинально изменить количество столбцов в сетке. Также можно с уверенностью сказать, что CSS Grid может автоматизировать так много утомительной работы по стилизации макетов.

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

Установка:

HTML

Код

<ul class="kumedia-semuenes">
  <li>ZorNet.Ru 1</li>
  <li>ZorNet.Ru 2</li>
  <li>ZorNet.Ru 3</li>
  <li>ZorNet.Ru 4</li>
  <li>ZorNet.Ru 5</li>
  <li>ZorNet.Ru 6</li>
  <li>ZorNet.Ru 7</li>
  <li>ZorNet.Ru 8</li>
  <li>ZorNet.Ru 9</li>
  <li>ZorNet.Ru 10</li>
  <li>ZorNet.Ru 11</li>
  <li>ZorNet.Ru 12</li>
</ul>

CSS

Код

/* Удаление стилей списков для элементов ul, ol с атрибутом class */
ul[class],
ol[class] {
  list-style: none;
}

/* Элементы, у которых нет класса, получают стили по умолчанию */
a:not([class]) {
  text-decoration: underline;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
  cursor: pointer;
}
/* Отключить недавний поиск в WebKit. */
::-webkit-search-decoration {
  display: none;
}

/* Нормализовать высоту строки поля формы в WebKit */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
select::-webkit-input-placeholder {
  line-height: normal;
}

/* Сделать поле поиска похожим на текстовое поле */
input[type='search'] {
  -webkit-appearance: textfield;
}

/* Сделайте изображения адаптивными */
img {
  max-width: 100%;
}

/* Удалите _all_ анимации и переходы для людей, которые предпочитают их не видеть */
@media (prefers-reduced-motion: reduce) {
  body {
  scroll-behavior: auto;
  }

  * {
  -webkit-animation: none !important;
  animation: none !important;
  -webkit-transition: none !important;
  transition: none !important;
  }
}

.kumedia-semuenes {
  --kumedia-semuenes-min-size: 16rem;

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--kumedia-semuenes-min-size), 1fr));
  grid-gap: 1rem;
}

/* Презентационные стили */

body {
  background: #efefef;
  padding: 1rem;
  line-height: 1.4;
  font-family: sans-serif;
}

li {
  padding: 5rem 1rem;
  text-align: center;
  font-size: 1.5rem;
  background: #5d6cd4;
  color: #eae4e4;
}

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

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

31 Октября 2020 Загрузок: 1 Просмотров: 1196 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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