Как сделать таблицу тарифов
Короткий ответ
Тарифы — это карточки в адаптивной сетке. Рекомендуемый выделен рамкой:
<style>
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.plan { display: flex; flex-direction: column; padding: 14px; border: 1px solid gainsboro; border-radius: 12px; }
.plan.best { border: 2px solid royalblue; box-shadow: 0 4px 14px rgb(65 105 225 / 25%); }
.plan b { font-size: 26px; }
.plan ul { padding-left: 18px; font-size: 14px; }
.plan button { margin-top: auto; padding: 8px; }
</style>
<div class="plans">
<div class="plan"><h3>Basic</h3><b>$0</b><ul><li>1 project</li></ul><button>Start</button></div>
<div class="plan best"><h3>Pro</h3><b>$12</b><ul><li>10 projects</li><li>Priority support</li></ul><button>Choose Pro</button></div>
<div class="plan"><h3>Team</h3><b>$29</b><ul><li>Unlimited projects</li><li>5 members</li></ul><button>Contact us</button></div>
</div>Кнопки на одном уровне
У тарифов разное число пунктов, и без подготовки кнопки стоят на разной высоте. Карточка сделана колонкой flexbox, а margin-top: auto у кнопки прижимает её к низу. Высоту карточек в одной строке grid выравнивает сам.
Метка «Популярный»
Над выделенной карточкой часто ставят метку. Добавьте карточке position: relative, а метке — position: absolute; top: -10px — подробнее в ответе про элемент в углу блока.
Частая ошибка
Делать тарифы настоящей таблицей table. На телефоне три колонки не помещаются, и таблица вылезает за экран. Карточки на grid сами встают в столбик. Таблица уместна только для подробного сравнения функций под карточками.
Функции из этого ответа
- grid-template-columns — Количество и ширина колонок сетки.
- repeat() — Повторяет дорожки сетки, чтобы не выписывать их по одной.
- <ul> — Маркированный список: пункты, порядок которых не важен.
- box-shadow — Тень вокруг блока элемента.