Здравствуйте, помогите, пожалуйста, с версткой по макету

Question

Здравствуйте, помогите, пожалуйста, с версткой по макету

Zagir Tulubaev Ученик (106), на голосовании 1 год назад

Как сверстать вот этот блок? Что я делаю неправильно? Заранее спасибо!

Answer 1

Иван Егоров Мастер (1877) 1 год назад

Класс item должен имет каждый прямоугольник, а обёртка item'ов (например, item-list) может быть grid'ом, чтобы расположить их в сетке

Zagir TulubaevУченик (106) 1 год назад

Пока гридом пользоваться не умею, друг подсказал сделать перенос с помощью flex: wrap, но вот не могу понять как

Иван Егоров Мастер (1877) Zagir Tulubaev, для этого надо контейнеру назначить максимальную ширину, её нужно подобрать так, чтобы в строке помещалось два элемента :)

Иван ЕгоровМастер (1877) 1 год назад

<div class="item">
<a href="#" class="item__header">Офисный</a>
<p class="item__price">15 000</p>
</div>

a {
text-decoration: none;
color: #000000;
}

.item {
width: 200px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.item__header {
width: 100%;
background: #CCC;
text-align: center;
padding: 10px 10px;
font-size: 1.5rem;
}

.item__price:after {
content: 'руб.';
margin-left: 5px;
}

Иван ЕгоровМастер (1877) 1 год назад

Извиняюсь, что отправляю таким образом, забыл пароль от codepen, не смог сохранить и ссылку скинуть :(

Zagir Tulubaev Ученик (106) Иван Егоров, Спасибо большое, сейчас придется разбираться, чтобы самому хотя бы понять, как это сделано)))

Иван ЕгоровМастер (1877) 1 год назад

Сам результат такой

Zagir Tulubaev Ученик (106) Иван Егоров, А вот вместо этого width: calc(2 * 200px + 10rem); можно что-то проще написать, например в пикселях? Чтобы я понимал