Как получить одинаковое расстояние между блоками?

Question

[Norum]

Как сделать так, чтобы расстояние между блоками с параметрами (этаж, высота потолков итд) было одинаковым, как в макете? Я пытался сделать так, чтобы при уменьшении экрана расстояние не уменьшалось, но кроме как через calc выставить что-то похожее, что задано на макете- не получилось. Ну может еще какие-то мелкие косяки заметите, буду только рад вашим конструктивным замечаниям.


Макет https://www.figma.com/file/9srXB2Gsy5e7dpmcEmC2or/...

Сам сайт tempessj.beget.tech

Код https://jsfiddle.net/h0tw12dL/

Answer 1

[Elena Fire]

grid вам в помощь

Comments

[Norum]

а можете показать, как именно?

[Elena Fire]

У вас пара Название-Свойство явно должны быть представлены в виде блока с точными высотой и шириной. Условно, у вас есть 6 блоков, которые нужно разместить в еще одном общем блоке.
Для решения этой задачи можно использовать блочную верстку, верстку флексами и верстку гридами.
Если все 6 свойств лежат у вас в общем блоке-обертке, то можно воспользоваться флексами:

.wrapper {
display: flex;
flex-display: row;
}
.wrapper div.svoistva {
width: 50%;
text-align: left;
}

[Norum]

Elena Fire, вот этот код относится к блокам внутри обертки? Просто при выставлении этих параметров получается дичь

.wrapper div.svoistva {
width: 50%;
text-align: left;

[Elena Fire]

Norum, 'это из-за margin-right. Подберите правильное значение. При 40% должно нормально быть.

[Elena Fire]

Вместо margin-right и margin-bottom можно использовать padding-right и padding-bottom - у вас ведь нет видимой рамки.

Answer 2

[Norum]

я сделал вообще по-другому

<div class="col desc">
                <h2>2-к квартира</h2>

                <ul class="specs">
                    <li><span>Этаж</span> 3 из 19</li>
                    <li><span>Высота потолков</span> 3,2 м</li>
                    <li><span>Отделка</span> Предчистовая</li>
                    <li class="clear"><span>Общая площадь</span> 32,24 м<sup>2</sup></li>
                    <li><span>Жилая площадь</span> 22,24 м<sup>2</sup></li>
                    <li><span>Площадь кухни</span> 14,24 м<sup>2</sup></li>
                </ul>

                <div class="ach">
                    
                    <div class="viewing"><i class="fas fa-check"></i> Вы были на просмотре</div>
                    <div class="accreditation"><i class="fas fa-times"></i> Дом аккредитован другим банком</div>

                </div>
            </div>

.item .col ul.specs {
    display: flex;
    flex-wrap: wrap;
    width: 450px;
}


.item .col ul.specs li {
    margin-bottom: 18px;
    font-weight: 500;
    color: #383736;
    width: 150px;
}

И получил то, что я хотел- не меняющийся размер при сжатии
https://disk.yandex.ru/i/wBvHQMomDRtwMg