Выравнивание строк в колонках (grid)
Всем добрый вечер! Только начал изучать гриды ибо столкнулся с проблемой. У меня есть 2 колонки и в них идут строки. Я бы хотел выровнять их без костылей и указания явных высот и ничего более разумного как гриды не нашёл.
Во всех столбцах после названия идёт строка про уроки 8 и 12. Во 2-ом столбце идёт так же "больше практики" и из-за этого я не могу выровнять их всех на одном уровне. Как в 1 столбце сделать так , чтобы он занимал столько же места как и во 2-ом где "больше практики"?
<section class="programms">
<div class="container">
<div class="programms__inner-row">
<div class="programms__item programms__item--one" style="background-image: url(images/programms/hands.jpg);">
<div class="programms__name">
<h3>BAZA 1.0 <span>базовый </span> </h3>
<p class="kurs">курс</p>
<p class="lesson">8 уроков</p>
</div>
<div class="programms__programm">
<div class="programms__programm-name">
ПРОГРАММА
</div>
<ul class="programms__programm-list">
<li>- теория</li>
<li>- технические аспекты</li>
<li>- строение кожи</li>
<li>- рабочее место</li>
<li>- техника безопасности</li>
<li>- стерилизация и дезинфекция</li>
<li>- трансфер эскиза на кожу</li>
<li>- практика на искусственной коже</li>
<li>- практика на моделях (2 урока)</li>
</ul>
</div>
<div class="programms__bonus">
<div class="programms__bonus-name">
BONUS
</div>
<ul class="programms__bonus-list">
<li>- история татуировки</li>
<li>- методические материалы</li>
<li>- скидка на оборудование</li>
</ul>
</div>
<div class="programms__bottom">
<a class="programms__link" href="#">Записаться</a>
<div class="programms__price">
<div class="programms__price-old">31.000</div>
<div class="programms__price-new">26000 Р </div>
</div>
</div>
</div>
<div class="programms__item programms__item--two" style="background-image: url(images/programms/bird.png);">
<div class="programms__name">
<h3>BAZA 2.0 <span>базовый </span> </h3>
<p class="kurs">расширенный курс</p>
<p class="lesson">12 уроков</p>
</div>
<div class="programms__info">
больше практики
</div>
<div class="programms__programm">
<div class="programms__programm-name">
ПРОГРАММА
</div>
<ul class="programms__programm-list">
<li>- теория</li>
<li>- технические аспекты</li>
<li>- медицинские аспекты</li>
<li>- строение кожи</li>
<li>- рабочее место</li>
<li>- техника безопасности</li>
<li>- стерилизация и дезинфекция</li>
<li>- трансфер эскиза на кожу</li>
<li>- практика на искусственной коже</li>
<li>- практика на моделях (4 урока)</li>
</ul>
</div>
<div class="programms__bonus">
<div class="programms__bonus-name">
BONUS
</div>
<ul class="programms__bonus-list">
<li>- стили татуировки</li>
<li>- история татуировки</li>
<li>- методические материалы</li>
<li>- скидка на оборудование</li>
<li>- подарочный набор тату-косметики</li>
</ul>
</div>
<div class="programms__bottom">
<a class="programms__link" href="#">Записаться</a>
<div class="programms__price">
<div class="programms__price-old">46.000</div>
<div class="programms__price-new">40000 Р </div>
</div>
</div>
</div>
</div>
</div>
</section>
// блок курсы
.programms{
&__inner{
&-row{
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 50px;
}
}
// Столбцы
&__item{
// width: 100%;
border: 1px solid #000;
border-radius: 50px;
padding: 70px 50px;
max-width: 750px;
display: grid;
grid-template-rows: auto;
// Руки
&--one{
background-repeat: no-repeat;
background-size: contain;
.programms__name{
// padding-bottom: 287px;
// grid-row: span 2;
}
}
// Птица
&--two{
background-repeat: no-repeat;
background-size: 80%;
background-position: 250px -20px;
display: grid;
grid-template-rows: 1fr 1fr 1fr 1fr;
.programms__name{
span{
line-height: 0.1;
}
}
}
// Тигр
&--three{
background-repeat: no-repeat;
background-size: 70%;
background-position: 240px 50px;
.programms__name{
// padding-bottom: 320px;
}
}
// Дракон
&--four{
background-repeat: no-repeat;
background-size: 70%;
background-position: 250px 20px;
}
}
// Столбцы конец
// Имя столбца
&__name{
h3{
padding-bottom: 20px;
font-family: 'gilroy-semibold';
font-size: 50px;
line-height: 0.1;
span{
font-family: 'gilroy-light';
font-size: 30px;
font-weight: 300;
margin-left: -10px;
}
}
p{
font-family: 'gilroy-light';
font-size: 30px;
}
.kurs{
line-height: 0.45;
}
.lesson{
margin-top: 35px;
}
}
// Имя столбца конец
// Имя первого списка в столбце
&__programm-name{
font-family: 'gilroy-regular';
font-size: 30px;
}
// Имя первого списка в столбце конец
// 1 список в столбце
&__programm-list{
li{
display: block;
font-family: 'gilroy-light';
font-size: 25px;
}
}
// 1 список в столбце конец
// Доп.информация в столбцах между именем и 1 списком( только во 2 и 4 столбце)
&__info{
font-size: 30px;
font-family: 'gilroy-regular';
}
// Доп.информация конец
// 2 список
&__bonus{
text-align: right;
&-name{
color: #f56359;
font-family: 'gilroy-regular';
font-size: 30px;
font-weight: 400;
}
&-list{
li{
display: block;
font-family: 'gilroy-light';
font-size: 25px;
}
}
}
// 2 список конец
// распределение кнопок и цены
&__bottom{
display: flex;
justify-content: space-between;
}
// распределение кнопок и цены конец
// Цена
&__price{
&-old{
font-family: 'gilroy-light';
font-size: 35px;
background-image: url("../images/linee.png");
background-position: -35px 20px;
display: inline-block;
padding-right: 5px;
padding-left: 5px;
margin-left: 45px;
}
&-new{
font-family: 'gilroy-semibold';
font-size: 50px;
}
// Цена конец
}
// кнопка записаться
&__link{
display: inline-block;
align-self: center;
padding: 20px 60px;
border-radius: 35px;
background-image: linear-gradient( rgb(238,118,72) 0%, rgb(237,87,75) 100%);
font-size: 35px;
color: rgb(254, 253, 253);
}
// кнопка записаться конец
}
// блок курсы конец