← Каталог
Типовые элементы интерфейса — Сетка (Grid layout)
Фрагмент из «Типовые элементы интерфейса»: Сетка (Grid layout).
<div class="card-grid">
<article class="card-grid__item">
<h3 class="card-grid__title">Аналитика</h3>
<p class="card-grid__text">Отчёты и дашборды в одном месте.</p>
</article>
<article class="card-grid__item">
<h3 class="card-grid__title">Дизайн</h3>
<p class="card-grid__text">Макеты, прототипы и UI-kit.</p>
</article>
<article class="card-grid__item">
<h3 class="card-grid__title">Разработка</h3>
<p class="card-grid__text">Frontend, API и деплой.</p>
</article>
</div><div class="card-grid">
<article class="card-grid__item">
<h3 class="card-grid__title">Аналитика</h3>
<p class="card-grid__text">Отчёты и дашборды в одном месте.</p>
</article>
<article class="card-grid__item">
<h3 class="card-grid__title">Дизайн</h3>
<p class="card-grid__text">Макеты, прототипы и UI-kit.</p>
</article>
<article class="card-grid__item">
<h3 class="card-grid__title">Разработка</h3>
<p class="card-grid__text">Frontend, API и деплой.</p>
</article>
</div>.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1.25rem;
}
.card-grid__item {
padding: 1.25rem;
border: 1px solid #e9ecef;
border-radius: 12px;
background-color: #ffffff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.card-grid__title {
margin: 0 0 0.5rem;
font-size: 1.125rem;
font-weight: var(--font-weight-bold);
color: var(--color-dark);
}
.card-grid__text {
margin: 0;
color: #64748b;
line-height: 1.5;
}.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1.25rem;
}
.card-grid__item {
padding: 1.25rem;
border: 1px solid #e9ecef;
border-radius: 12px;
background-color: #ffffff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.card-grid__title {
margin: 0 0 0.5rem;
font-size: 1.125rem;
font-weight: var(--font-weight-bold);
color: var(--color-dark);
}
.card-grid__text {
margin: 0;
color: #64748b;
line-height: 1.5;
}