<section class="wrapper">
 <h2 class="heading">Blog Posts</h2>
  <main>
    <article>
      <img
        src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?crop=entropyq=80&w=400"
        alt=""
      />

      <h2 class="p7">Lorem ipsum dolor sit</h2>
      <div class="read__more">Read more</div>
    </article>
    <article>
      <img
        src="https://images.unsplash.com/photo-1650542918181-ba360683d936?crop=entropyq=80&w=400"
        alt=""
      />

      <h2 class="p7">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit Lorem ipsum
      </h2>
      <div class="read__more">Read more</div>
    </article>
    <article>
      <img
        src="https://images.unsplash.com/photo-1497215728101-856f4ea42174?crop=entropyq=80&w=400"
        alt=""
      />

      <h2 class="p7">Mollitia commodi, earum vitae</h2>
      <div class="read__more">Read more</div>
    </article>
    <article>
      <img
        src="https://images.unsplash.com/photo-1650548158371-d48266a26887?crop=entropyq=80&w=400"
        alt=""
      />

      <h2 class="p7">maxime excepturi odio quasi voluptates</h2>
      <div class="read__more">Read more</div>
    </article>
    <article>
      <img
        src="https://images.unsplash.com/photo-1650614967039-1cb97737df86?crop=entropyq=80&w=400"
        alt=""
      />
      <h2 class="p7">laboriosam iste quis, nihil dolor</h2>
      <div class="read__more">Read more</div>
    </article>
    <article>
      <img
        src="https://images.unsplash.com/photo-1650639012849-c66a018e107a?crop=entropyq=80&w=400"
        alt=""
      />
      <h2 class="p7">
        voluptatem dolore. Numquam Veniam deleniti
      </h2>
      <div class="read__more">Read more</div>
    </article>
    <article>
      <img
        src="https://images.unsplash.com/photo-1650637472771-16fedc3c6668?crop=entropyq=80&w=400"
        alt=""
      />

      <h2 class="p7">
        amet consectetur adipisicing elit amet consectetur
      </h2>
      <div class="read__more">Read more</div>
    </article>
    <article>
      <img
        src="https://images.unsplash.com/photo-1650653823792-31256d087311?crop=entropyq=80&w=400"
        alt=""
      />
      <h2 class="p7">Totam iusto adipisci quidem</h2>
      <div class="read__more">Read more</div>
    </article>
  </main>
</section>
main {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(300px, 100%), 1fr)
  );
  gap: 1rem;
  grid-auto-flow: dense;
}


article {
  box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 8px;
  background-color: rgb(255, 255, 255);
  border-radius: 0.5rem;

  display: grid;
  grid-auto-rows: 180px 1fr auto;
  overflow: hidden;
}

img {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;

  width: 100%;
  display: block;
  height: 180px;
  object-fit: cover;
}

h2 {
  font-size: 19px;
}

.p7 {
  padding: 7px;
}

.read__more {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
  font-weight: 600;
  padding: 7px;
}


* {
  box-sizing: border-box;
  margin: 0;
}

body,
html {
  height: 100vh;
}

body {
  font-family: system-ui, sans-serif;
  margin: 0 auto;
}

.wrapper {
  max-width: 1280px;
  margin: 4rem auto;
  padding-inline: 1rem;
}

.heading {
  font-size: 2rem;
  margin-bottom: 1rem;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.