<div class="columns">
<div class="catalog__column">
<div class="catalog__subtitle">Заточка и <br>полировка ножей</div>
<ul class="catalog__list">
<li class="catalog__item"><a href="">Паста ГОИ</a></li>
<li class="catalog__item"><a href="">Алмазная паста</a></li>
<li class="catalog__item"><a href="">Бруски и камни для заточки</a></li>
<li class="catalog__item"><a href="">Заточные системы</a></li>
<li class="catalog__item"><a href="">Паста ГОИ</a></li>
<li class="catalog__item"><a href="">Алмазная паста</a></li>
<li class="catalog__item"><a href="">Бруски и камни для заточки</a></li>
<li class="catalog__item"><a href="">Заточные системы</a></li>
</ul>
<div class="catalog__footer">Смотреть всё</div>
</div>
<div class="catalog__column">
<div class="catalog__subtitle">Заточка и полировка ножей</div>
<ul class="catalog__list">
<li class="catalog__item"><a href="">Паста ГОИ</a></li>
<li class="catalog__item"><a href="">Алмазная паста</a></li>
<li class="catalog__item"><a href="">Бруски и камни для заточки</a></li>
<li class="catalog__item"><a href="">Заточные системы</a></li>
<li class="catalog__item"><a href="">Бруски и камни для заточки</a></li>
<li class="catalog__item"><a href="">Заточные системы</a></li>
</ul>
<div class="catalog__footer">Смотреть всё</div>
</div>
<div class="catalog__column">
<div class="catalog__subtitle">Заточка и полировка ножей</div>
<ul class="catalog__list">
<li class="catalog__item"><a href="">Паста ГОИ</a></li>
<li class="catalog__item"><a href="">Алмазная паста</a></li>
<li class="catalog__item"><a href="">Бруски и камни для заточки</a></li>
<li class="catalog__item"><a href="">Заточные системы</a></li>
</ul>
<div class="catalog__footer">Смотреть всё</div>
</div>
</div>
* {
box-sizing: border-box;
}
.columns {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto 1fr auto;
grid-auto-flow: column;
}
.catalog__column {
display: contents;
}
.catalog__subtitle {
border-bottom: 1px solid;
padding: 1rem;
}
.catalog__list {
padding: 1rem;
}
.catalog__footer {
padding: 1rem;
border-top: 1px solid;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.