В этом материале узнаете, как создать адаптивный макет 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;
}
Демонстрация