Создание разноцветных градиентных плашек на сайте при помощи display grid в css
Ранее для создания равномерных блоков, изменяющих ширину в зависимости от разрешения экрана, требовалось написание десяток сток кода css. Затем требовалось время на корректировку и подгонку таких элементов. Но что, если можно обойтись несколькими строчками css и не только сэкономить время, но и использовать современные спецификации в css, а именно display grid.
Итак, у нас имеется контейнер section. Для него указываем class="plashki" со спецификацией flex. После этого абсолютной любой элемент в контейнере будет подчиняться правилам grid разметки в html.
Содержание класса plashki следующее:
.plashki {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
grid-gap: 20px;
}
Итак, мы указываем сеточную разметку в css - grid. Далее прописываем автозаполнение при минимальной ширине элемента в 220 пикселей. Это указываем в grid-template-columns. А в grid-gap указываем отступ со всех сторон в 20 пикселей. HTML код этого контейнера выглядит следующим образом:
<section class="plashki">
<div>
<div class="pl_abitur_info" style="background: url('fon_rr.png'), linear-gradient(180deg, #C84E89 0%, #F15F79 100%);">
<div class="abit_pl_content">
<div class="kod">19.02.10</div>
<div class="kval">Обр. программа</div>
<div class="napr">Технология продукции общественного питания</div>
<div class="lin"></div>
<div class="kval">Квалификация</div>
<div class="profe">Техник-технолог</div>
<div class="but_ab"><a href="" target="_blank" class="abit_but_inf">Подробнее ></a></div>
</div>
</div>
</div>
<div>
<div class="pl_abitur_info" style="background: url('fon_rr.png'), linear-gradient(0deg, #9400D3 0%, #4B0082 100%);">
<div class="abit_pl_content">
<div class="kod">38.02.01</div>
<div class="kval">Обр. программа</div>
<div class="napr">Экономика и бухгалтерский учет<br>(по отраслям)</div>
<div class="lin"></div>
<div class="kval">Квалификация</div>
<div class="profe">Бухгалтер</div>
<div class="but_ab"><a href="" class="abit_but_inf" target="_blank">Подробнее ></a></div>
</div>
</div>
</div>
....
</section>
Для задания уникального цвета для каждой плашки используем спецификацию background, а именно:
background: url('fon_rr.png'), linear-gradient(180deg, #C84E89 0%, #F15F79 100%);
Причем цвет очень легко поменять, используя панель "элементы" в браузере Google Chrome или другом.
Для формирования разметки внутри grid плашек я использую спецификацию flex. Также в классе pl_abitur_info я указываю высоту элемента равную 100%. Это сделано для того, чтобы каждая плашка была одинакового размера не только по ширине, но и по высоте.
.pl_abitur_info {
border-radius: 2px;
height: 100%;
display: flex;
}
Фоновое изображение fon_rr.png позволяет придать дополнительный стиль плашкам grid. Результат работы html и css кода представлен на изображении ниже.