Как сверстать такой грид?

Question

[Konstantin]

Пытался разделить на столбцы но они не могут быть все одинаковой ширины. Может у кого-то будет идея как его быстро сверстать?

Answer 1

[Ankhena]

Пытался разделить на столбцы но они не могут быть все одинаковой ширины.

Кто они не могут?

И, во-первых, могут.
А, во-вторых, никто не заставляет делать их одинаковыми.

Если сетка именно такая как на скрине, то считаем количество столбцов и их ширину. По дороге находим баг в макете (или на вашем скрине). В итоге будем считать, что отступы всюду по 30.
Получаем:
270 270 170 370

Для адаптива переводим всё в единицы fr, по дороге упрощая числа (это сами).

Comments

[Ankhena]

Konstantin - mvr что не получилось?

[Konstantin]

Ankhena вы всё правильно написали. Там ошибка в макете, из-за которой я ночью сонный не мог понять че за белеберда творится. Потом следующий косяк был что я считал каждый столбец, разделенный gap-ом за два столбца.


В итоге всё сделал так:

<div class="ourProjects-grid-container">
            <div class="item-1"><img src="./assets/images/imageFirst.svg" alt="buildingFirst"></div>
            <div class="item-2"><img src="./assets/images/imageSec.svg" alt="buildingSec"></div>
            <div class="item-3"><img src="./assets/images/imageTh.svg" alt="buildingThird"></div>
            <div class="item-4"><img src="./assets/images/imageFo.svg" alt="buildingForth"></div>
            <div class="item-5"><img src="./assets/images/imageFi.svg" alt="buildingFifth"></div>
 </div>

.ourProjects-grid-container {
    display: grid;
    width: 1170px;
    grid-template-columns: 270px 270px 170px 370px;
    grid-template-rows: repeat(2, 255px);
    grid-gap: 30px;

}

.ourProjects-grid-container .item-1 {
    grid-column: 1/3;
    grid-row: 1/2;
}

.ourProjects-grid-container .item-2 {
    grid-column: 3/5;
    grid-row: 1/2; 
}

.ourProjects-grid-container .item-3 {
    grid-column: 1/2;
    grid-row: 2/3; 
}

.ourProjects-grid-container .item-4 {
    grid-column: 2/4;
    grid-row: 2/3; 
}

.ourProjects-grid-container .item-5 {
    grid-column: 4/5;
    grid-row: 2/3;  
}

Но не знаю как тут сделать через fr, ведь столбцы не одинаковой ширины.

[Ankhena]

Konstantin - mvr, на 10 поделить и будут fr.
Не нужно указывать номера линий, это лишнее, просто через span указывайте, меньше кода

Answer 2

[Alex_mos]

такой и вобще мне кажется много раз тут задавали подобные вопросы про сетку на гридах

Answer 3

[Pavel-ww]

Можно и одинаковой ширины. Разделите на большее количество колонок с более мелким шагом, вплоть до того, что можете разлиновать как тетрадь в клетку. В общем подберите наименьший шаг, согласно вашему макету. А потом с помощью grid-column и grid-row расположите элементы как надо

Comments

[ForSureN1]

Да, вы все верно подметили, просто нужно взять самую маленькую картинку, ее разбить на 2 колонки, и уже от нее плясать, то есть картинка побольше 3 колонки занимает, еще больше 4, и самая большая 5,итого будет условных 10 колонок