标题、图片、文本框

Question

I want to position everything just like in the photo, I manage to make it close to this but not the same. This is my code of 1 column I need to make 6 of them and they should be responsive. (Still searching in google)

<div class="row">
    <div class="col"><h1 class="font-im-italic" style="color: #fff; position: relative; top: 15%;">Lorem Ipsum</h1>
    <img src="images/content/kolo-1.jpg" alt="">
    <p style="font-weight: 400; line-height: 25px; text-align: left; width: 93.5%; padding: 5%; letter-spacing: -1px; background-color: rgba(255, 255, 255, 0.514);">
    Maecenas nec mauris dui. Curabitur cursus metus convallis metus feugiat consequat. In hac habitasse platea dictumst. Suspendisse vehicula magna vitae metus iaculis, sed iaculis urna ultrices. Vivamus bibendum ut risus a tincidunt. Duis eget pulvinar eros. Proin sed venenatis dolor, ac tempor nisl.</p>
    </div>
</div>

Answer 1

Try this

 .row { display: -ms-grid; display: grid; -ms-grid-columns: (minmax(360px, 1fr))[auto-fit]; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); // Or some other grid template grid-gap: 3.2rem; width: 100%; margin: 0 auto; margin-bottom: 1.5rem; text-align: center; align-items: center; }.col1 { height: 300px; background-color: #f0ce7f; }

 <div class="row"> <img src="https://static.posters.cz/image/1300/fotobehang/beautiful-flowers-pastel-colours-312x219-cm-130g-m2-vlies-non-woven-i60057.jpg" alt=""> <h1 class="font-im-italic" style="color: #fff; position: absolute; text-align: center;">Lorem Ipsum</h1> <div class="col1"> <p style="font-weight: 400; line-height: 25px; text-align: left; width: 93.5%; padding: 5%; letter-spacing: -1px; background-color: rgba(255, 255, 255, 0.514);"> Maecenas nec mauris dui. Curabitur cursus metus convallis metus feugiat consequat. In hac habitasse platea dictumst. Suspendisse vehicula magna vitae metus iaculis, sed iaculis urna ultrices. Vivamus bibendum ut risus a tincidunt. Duis eget pulvinar eros. Proin sed venenatis dolor, ac tempor nisl.</p> </div> </div>

The grid-template works really well with these kind of things