CodePen Embed - CSS blog cards

<div class="main-container">
  <div class="grid-container">
    <div class="card card--2x">
      <div class="card__content big-script padding-large">
        <p>Travel and see the world</p>
      </div>
    </div>
    <div class="card">
      <div class="card__image">
        <img src="https://images.pexels.com/photos/443416/pexels-photo-443416.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260" />
      </div>
    </div>
    <div class="card">
      <div class="card__image">        <img src="https://images.pexels.com/photos/542411/pexels-photo-542411.png?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260" />
      </div>
    </div>
    <div class="card">
      <div class="card__content">
        <p><em>Travel is fatal to prejudice, bigotry, and narrow-mindedness.</em></p>
        <p>— Mark Twain</p>
      </div>
    </div>
    <div class="card card--horizontal">
      <div class="card__image">
        <img src="https://images.pexels.com/photos/614494/pexels-photo-614494.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260" />
      </div>
    </div>
    <div class="card card--featured">
      <div class="card__side-by-side--m">
        <div class="card__image">
          <img src="https://images.pexels.com/photos/1125278/pexels-photo-1125278.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260" />
        </div>
        <div class="card__content padding-large--l">
          <h2>Quisque volutpat.</h2>
          <p>Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit.</p>
          <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
          <div class="card__button">More...</div>
        </div>
      </div>
    </div>
    <div class="card card--vertical">
      <div class="card__image">
        <img src="https://images.pexels.com/photos/920968/pexels-photo-920968.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260" />
      </div>
    </div>
    <div class="card">
      <div class="card__image">
        <img src="https://images.pexels.com/photos/386009/pexels-photo-386009.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260" />
      </div>
    </div>
    <div class="card card--horizontal">
      <div class="card__side-by-side">
        <div class="card__image">
          <img src="https://images.pexels.com/photos/885880/pexels-photo-885880.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260" />
        </div>
        <div class="card__content">
          <h3>Lorem ipsum</h3>
          <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra</p>
        </div>
      </div>
    </div>
    <div class="card card--vertical">
      <div class="card__image">
        <img src="https://images.pexels.com/photos/450597/pexels-photo-450597.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260" />
      </div>
    </div>
    <div class="card">
      <div class="card__image">
        <img src="https://images.pexels.com/photos/269923/pexels-photo-269923.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260" />
      </div>
    </div>
    <div class="card">
      <div class="card__content">
        <p><em>We wander for distraction, but we travel for fulfilment.</em></p>
        <p>— Hilaire Belloc</p>
      </div>
    </div>
    <div class="card card--2x">
      <div class="card__image">
        <img src="https://images.pexels.com/photos/247929/pexels-photo-247929.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260" />
      </div>
    </div>
    <div class="card card--horizontal card--frameless">
      <div class="card__content big-script">
        <p>Bon voyage</p>
      </div>
    </div>
    <div class="card">
      <div class="card__image">
        <img src="https://images.pexels.com/photos/33545/sunrise-phu-quoc-island-ocean.jpg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260" />
      </div>
    </div>
    <div class="card card--horizontal">
      <div class="card__image">
        <img src="https://images.pexels.com/photos/358319/pexels-photo-358319.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260" />
      </div>
    </div>
    <div class="card">
      <div class="card__image">
        <img src="https://images.pexels.com/photos/373912/pexels-photo-373912.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260" />
      </div>
    </div>
    <div class="card">
      <div class="card__content">
        <p><em>A good traveller has no fixed plans and is not intent on arriving.</em></p>
        <p>— Lao Tzu</p>
      </div>
    </div>
    <div class="card">
      <div class="card__image">
        <img src="https://images.pexels.com/photos/386007/pexels-photo-386007.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260" />
      </div>
    </div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css?family=Open+Sans|Sacramento');
html {
  font-size: 14.5px;
}
body {
  font-family: 'Open Sans', sans-serif;
  line-height: 1.45em;
  background-color: #f0f0f0;
  color: #404646;
}
* {
  box-sizing: border-box;
}
.main-container {
  margin: 1.6rem 0.8rem;
}
.grid-container {
  margin: auto;
  display: grid;
  grid-gap: 1.1312rem;
  grid-template-columns: repeat(auto-fit, 12.8rem);
  grid-auto-rows: 12.8rem;
  grid-auto-flow: dense;
  justify-content: center;
  max-width: 75em;
}
.card {
  grid-row: auto / span 1;
  grid-column: auto / span 1;
  background-color: white;
  box-shadow: 1px 3px 3px rgba(0, 10, 20, 0.06);
}
.card h1, .card h2, .card h3, .card h4, .card p {
  margin-top: 0;
  font-weight: normal;
}
.card__image {
  height: 100%;
  max-height: 100%;
  width: 100%;
  display: flex;
}
.card__image img {
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  width: 100%;
  object-fit: cover;
}
.card__side-by-side {
  height: 100%;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
}
.card__side-by-side--m {
  height: 100%;
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
}
.card__side-by-side--m img {
  min-height: auto;
}
.card__content {
  padding: 1.6rem;
}
.card__button {
  margin: 1.6rem 0;
  text-align: center;
  padding: 0.8rem 1.6rem;
  background: none;
  border: 0.5px solid #777;
  border-radius: 2px;
}
.card__button:hover {
  border-color: #d099a0;
}
.card--featured {
  grid-row: auto / span 3;
  grid-column: auto / span 2;
}
.card--2x {
  grid-row: auto / span 2;
  grid-column: auto / span 2;
}
.card--vertical {
  grid-row: auto / span 2;
}
.card--horizontal {
  grid-column: auto / span 2;
}
.card--frameless {
  background-color: transparent;
  box-shadow: none;
}
.padding-large {
  padding: 3.2rem;
}
.padding-large--l {
  padding: 1.6rem;
}
.big-script {
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  font-family: 'Sacramento', sans-serif;
  font-size: 4.3em;
  line-height: 1.15em;
  text-align: center;
}
.big-script p {
  margin: 0;
}
@media (max-width: 413px) {
  .grid-container {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
  }
  .card {
    min-height: 12.8rem;
  }
}
@media (min-width: 627px) {
  .grid-container {
    grid-gap: 1.6rem;
  }
  .card__side-by-side--m {
    flex-flow: row nowrap;
  }
  .card__side-by-side--m img {
    min-height: 100%;
  }
  .card--featured {
    grid-row: auto / span 2;
    grid-column: 1 / -1;
  }
}
@media (min-width: 836px) {
  .padding-large--l {
    padding: 3.2rem;
  }
}

This Pen is owned by Ibraheem Uthman on CodePen.

See more by @ib-uth on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.