<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Grid and Flex: task 4</title>
  </head>

  <body>
    <div class="container">
      <div class="card">
        <div class="color"></div>
        <ul class="tags">
          <li>balloon</li>
          <li>red</li>
          <li>sky</li>
          <li>blue</li>
          <li>Hot air balloon</li>
        </ul>
      </div>
      <div class="card">
        <div class="color"></div>
        <ul class="tags">
          <li>balloons</li>
          <li>houses</li>
          <li>train</li>
          <li>harborside</li>
        </ul>
      </div>
      <div class="card">
        <div class="color"></div>
        <ul class="tags">
          <li>balloons</li>
          <li>inflating</li>
          <li>green</li>
          <li>blue</li>
        </ul>
      </div>
      <div class="card">
        <div class="color"></div>
        <ul class="tags">
          <li>balloon</li>
          <li>sun</li>
          <li>sky</li>
          <li>summer</li>
          <li>bright</li>
        </ul>
      </div>
    </div>
  </body>
</html>
/* Given as the starting point */
body {
  background-color: #fff;
  color: #333;
  font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0;
}

.card {
  display: grid;
  grid-template-rows: 200px min-content; /* Please see my question below. */
}

.tags {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tags > * {
  background-color: #999;
  color: #fff;
  padding: 0.2em 0.8em;
  border-radius: 0.2em;
  font-size: 80%;
  margin: 5px;
}

/* My work starts from here*/
/* Changing images to background colours */
.card {
  width: 200px;
}

.card:nth-child(odd) .color {
  background: powderblue;
}

.card:nth-child(even) .color {
  background: pink;
}

/* Flexbox and Grid */
.container {
  display: flex;
  flex-flow: row wrap;
  gap: 10px;
}

.tags {
  display: flex;
  flex-flow: row wrap;
}

/* Question:
In the CSS rules given as the starting point, the grid layout of <card> is specified by
  .card { grid-template-rows: 200px min-content;}.
However, I could make my page look similar to the example
without specifying placements of .color and .tags in the grid like below.
  .color { grid-row: 1;}
  .tags { grid-row: 2;}
Why is this?
Is the grid layout of <card> necessary in the first place?
*/
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.