Как расположить блоки и картинку,как на фото?
Ответы (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>
