• Страница 1 из 1
  • 1
Делаем адаптивные блоки и сетку на CSS Grid
Kosten
Суббота, 02 Февраля 2019, 03:28 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
В этом материале узнаете, как создать адаптивный макет CSS Grid. Где . Элементы могут быть помещены в сетку, соответственно строкам и столбцам. Создадим на странице несколько элементов макета. Также разберем, как использовать использовать CSS Grid, который на прямую отвечает в создании адаптивного макета .

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

Сетка CSS теперь поддерживается во многих других современных браузерах и стала ответом на многие просьбы веб-разработчиков во всем мире. Теперь есть возможность расположить элементы блока рядом друг с другом, где CSS-сетка позволяет нам размещать элементы не только в строке или столбце, но и в нескольких строках и столбца.

Создание адаптивного макета с помощью CSS Grid



HTML

Код
<div class="vascompon">
<div class="korganigun-mespondevas">
<h2>Оптимизация социальной системы (SEO)</h2>
<h4>Этическая реализация SEO, чтобы предложить результаты мирового класса</h4>
</div>
<div class="korganigun-mespondevas">
<h2>Оптимизация под социальные сети (SMO)</h2>
<h4>Мониторинг и техническое обслуживание для поддержания высоких рангов и обеспечения ценности</h4>
</div>
<div class="korganigun-mespondevas">
<h2>Электронная коммерция SEO</h2>
<h4>Отображение органических списков на основе релевантности контента</h4>
</div>
<div class="korganigun-mespondevas">
<h2>Мобильное SEO</h2>
<h4>Платформы социальных сетей, такие как Facebook, Google Plus и Twitter</h4>
</div>
</div>
<div class="vascompon">
<div class="korganigun-mespondevas">
<h2>Многоязычный SEO</h2>
<h4>Поощрение положительного влияния на рейтинг вашей поисковой системы</h4>
</div>
<div class="korganigun-mespondevas">
<h2>Выполнение SEO аудитов</h2>
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4>
</div>
<div class="korganigun-mespondevas">
<h2>Веб-анализ</h2>
<h4>Увеличение интернет-трафика за счет увеличения продаж и конверсии</h4>
</div>
</div>
<div class="vascompon">
<div class="korganigun-mespondevas">
<h2>Этическая реализация SEO</h2>
<h4>Распространение информации о вашем бизнесе по различным каналам</h4>
</div>
<div class="korganigun-mespondevas">
<h2>Эффективные методы на практике</h2>
<h4>Мы являемся одним из лучших поставщиков услуг SMO</h4>
</div>
</div>


CSS

Код
.vascompon {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 20px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 0;
}

.korganigun-mespondevas {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 18px;
    text-align: center;
    min-height: 310px;
    box-shadow: 0 0px 30px 0 rgba(25, 24, 24, 0.32);
    border: 2px solid #d4cfcf;
    border-radius: 5px;
}


Демонстрация
Прикрепления: 1703031.png (60.7 Kb)
Страна: (RU)
  • Страница 1 из 1
  • 1
Поиск: