Как расположить блоки и картинку,как на фото?

Это делается через grid или как? введите сюда описание изображения


Ответы (1 шт):

Автор решения: Илья Яловой

.parent-block {
    display: grid;
    grid-template-columns: 25% 50% 25%;
    padding: 10px;
}

p {
    box-sizing: border-box;
    padding: 10px;
    font-size: 20px;
    color: aquamarine;
    font-weight: 600;
}

p:nth-child(1) {
    grid-column: 2 / 3;
}
p:nth-child(2) {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
}
p:nth-child(3) {
    grid-row: 2 / 3;
    grid-column: 3 / 4;
}
p:nth-child(4) {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}
p:nth-child(5) {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
}
img {
    grid-column: 2 / 3;
    grid-row: 2 / 4;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
<div class="parent-block">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut officiis nihil corrupti ipsam illum. Placeat hic qui sequi dolores at.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut officiis nihil corrupti ipsam illum. Placeat hic qui sequi dolores at.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut officiis nihil corrupti ipsam illum. Placeat hic qui sequi dolores at.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut officiis nihil corrupti ipsam illum. Placeat hic qui sequi dolores at.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut officiis nihil corrupti ipsam illum. Placeat hic qui sequi dolores at.</p>
        <img src="https://source.unsplash.com/user/c_v_r/600x250" alt="">
    </div>

→ Ссылка