Card grid

by ShaCP

HTML

<div class="grid-layout">

  <div class="image grid-item" id="image1">
    image
  </div>
  <div class="text grid-item">
    text 1
  </div>
    <div class="text grid-item">
    text 2
  </div>
    <div class="button grid-item">
    button
  </div>
  <div class="tags">
    <div class="tag">
      tag
    </div>
    <div class="tag">
      tag
    </div>
    <div class="tag">
      tag
    </div>
    <div class="tag">
      tag
    </div>
    <div class="tag">
      tag
    </div>
    <div class="tag">
      tag
    </div>
  </div>
  <div class="date grid-item">
  date
  </div>
</div>

CSS

* {
  border: 1px solid black;
}

.grid-layout {
  display: grid;
  grid-template-areas: "image text1 text1 button"
    "image text2 text2 button"
    "tags tags date date";
  grid-template-columns: 100px 1fr 50px 50px;
  grid-auto-flow: row;
  height: 200px;
}

.image {
  background-color: lightskyblue;
  grid-area: image;
}

.text {
  background-color: yellow;
}

.button {
  grid-area: button;
  background-color: lightgray;
}

.text:nth-child(2) {
  grid-area: text1;
}

.text:nth-child(3) {
  grid-area: text2;
}

.grid-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tag {
  background-color: lightgreen;
}

.tags {
  display: grid;
  grid-auto-flow: column;
  grid-area: tags;
}

.date {
  background-color: lightpink;
  grid-area: date;
}