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

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

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

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

Это основной процесс для создания сетки:

1. С начало идет создание контейнера сетки;
2. Производим расчёт ширины для всех колонок;
3. Нужно изначально задать отступы между колонками;
4. Также важно сделать вариацию раскладки;
5. Остается, чтоб все было в адаптивном режиме для всех размеров экрана.

Если выходит в сеть с различного аппарата:

1. Если смотреть с компьютера на большом мониторе, вообщем в реальном обзоре.

2. Здесь вид больше всего с планшета или близко по ширине размера экрана.

3. Это вид производится самого мелкого экрана мобильного гаджета.

Приступаем к установке:

HTML

Код

<div class="setkidsav-ulomsaged">
  <h1>Супер простые адаптивные сетки CSS</h1>
  <div class="gavrelin-augkubag">
  <img src="Ссылка на изображение" alt="Ключевые слова" class="img-lamdosekin">
  <img src="Ссылка на изображение" alt="Ключевые слова" class="img-lamdosekin">
  <img src="Ссылка на изображение" alt="Ключевые слова" class="img-lamdosekin">
  <img src="Ссылка на изображение" alt="Ключевые слова" class="img-lamdosekin">
  <img src="Ссылка на изображение" alt="Ключевые слова" class="img-lamdosekin">
  <img src="Ссылка на изображение" alt="Ключевые слова" class="img-lamdosekin">
  </div>
</div>

CSS

Код

.setkidsav-ulomsaged {
  margin: 0 auto;
  padding: 1em;
}

.gavrelin-augkubag {
  display: grid;
  grid-gap: 1em;
}

.img-lamdosekin {
  width: 100%;
  height: auto;
}

@media screen and (min-width: 500px) {
  .gavrelin-augkubag {
  grid-template-columns: repeat(2, 1fr);

  }

  .setkidsav-ulomsaged {
  max-width: 75vw;
  }
}

@media screen and (min-width: 1000px) {

  .gavrelin-augkubag {
  grid-template-columns: repeat(3, 1fr);
  }

  .setkidsav-ulomsaged {
  max-width: 50vw;
  }
}

Есть много методов по построение сетки, этот считаю самый простой.

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

13 Ноября 2018 Просмотров: 1096 Комментариев: (0)

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

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

Kosten

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