mixin card(title, content)
  .box
    img(
      src="https://placekitten.com/1600/901",
      alt="",
      width="1600",
      height="900"
    )
    h1.title= title
    .content
      p= content
    .actions
      button.button Details
      button.button Buy

.grid
  +card("Short title, short text", "Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores magni reiciendis eveniet facilis consectetur nemo maxime molestiae numquam fugiat excepturi nam placeat, perspiciatis dolor, vel distinctio quis assumenda quia deleniti!")

  +card("Very extremely long title, with long text", "Shorter body copy")

  +card("Short title, short text", "lorem")

  +card("Short title, short text", "lorem")
View Compiled
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 2rem;
  padding: 2rem;
}

.box {
  overflow: hidden;

  grid-row: span 4;

  padding: 0;
  margin: 0 !important;

  @supports (grid-template-rows: subgrid) {
    display: grid;
    gap: 0; // overrides 2rem
    // grid-template-rows: subgrid;
  }
  @supports not (grid-template-rows: subgrid) {
    display: flex;
    flex-direction: column;
    .content {
      flex: 1;
    }
  }

  .title {
    margin: 0;
    padding: 1rem;
    background: hsl(40, 50%, 90%);
  }
  .content {
    margin: 0;
    padding: 1rem;
    background: hsl(40, 50%, 93%);
  }
  .actions {
    padding: 1rem;
    background: hsl(40, 50%, 96%);
  }
  img {
    width: 100%;
    height: 200px;
    // aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
  }
}

body {
  background: radial-gradient(circle at bottom right, #eee, #ccc);
  margin: 0;
  min-height: 100vh;
}
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.