Я создаю оценочные карты, где каждая карта представляет собой сетку с 1 столбцом и 6 строками.
Мне нужно поместить отступы вокруг текстовых ячеек, чтобы их содержимое не касалось краев. Я могу применить атрибут встроенного стиля, но это не работает:
.plan-cost-details {
text-align: center;
padding: 20px;
}
Также не вложенный div:
.plan-cost-details > div {
padding: 20px;
}
Я пытался добавить отступы к ячейкам сетки, но безрезультатно. Я попытался вставить второй div внутри и применить к нему отступ - тоже ничего.
Я пытаюсь использовать сетку вместо флексбокса, чтобы все элементы располагались по карточкам.
Что мне здесь не хватает? У меня также есть Codepen с 2 картами в сетке.
карта:
<div class="pricing-plan-card">
<div class="plan-title">Professional</div>
<div class="plan-summary">
Try out features that will get you up and running.
</div>
<div class="plan-price">
<span class="currency">$</span>25
<div class="plan-price-interval">per month</div>
</div>
<div class="plan-price-details">
Billed annually or $12 month-to-month
</div>
<button class="btn btn-primary">Choose</button>
<div class="plan-features">
<p><strong>Free plus:</strong></p>
<ul>
<li>Feature item one and the benefits</li>
<li>Feature item two and the benefits</li>
<li>Feature item three and the benefits</li>
</ul>
</div>
</div>
SCSS:
.pricing-plan-card {
display: grid;
padding: 1.5rem;
background-color: #fff;
grid-template-areas: 'title' 'summary' 'price' 'pricedetail' 'button' 'features';
grid-template-columns: 1fr;
grid-template-rows: 60px 60px 80px 60px 75px 1fr;
.plan-title {
color: magenta;
font-family: helvetica;
font-size: 1.5rem;
text-align: center;
grid-area: title;
}
.plan-summary {
font-size: 1rem;
text-align: center;
grid-area: summary;
}
.plan-price {
text-align: center;
color: blue;
font-family: helvetica;
font-size: 3rem;
letter-spacing: -.05em;
grid-area: price;
.currency {
font-size: 2rem;
vertical-align: text-top;
}
.plan-price-interval {
display: block;
font-family: arial;
font-size: 14px;
letter-spacing: normal;
}
.plan-price-details {
text-align: center;
grid-area: pricedetail;
}
button {
display: block;
grid-area: button;
}
.plan-features {
grid-area: features;
div {
padding: 20px;
}
}
}
}