Grid Layout Skills - Grid and Flex Layout 4

May I get an assessment on this? It’s from the Gris Layout Skills section. I may have had some sizing issues trying to get it to match the size of the sample so that the tags could look the same.

<body>

<div class="container">
  <div class="card">
    <img src="https://raw.githubusercontent.com/mdn/css-examples/master/learn/tasks/grid/balloons1.jpg" alt="a single red balloon">
    <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">
    <img src="https://raw.githubusercontent.com/mdn/css-examples/master/learn/tasks/grid/balloons2.jpg" alt="balloons over some houses">
    <ul class="tags">
      <li>balloons</li>
      <li>houses</li>
      <li>train</li>
      <li>harborside</li>
    </ul>
  </div>
  <div class="card">
    <img src="https://raw.githubusercontent.com/mdn/css-examples/master/learn/tasks/grid/balloons3.jpg" alt="close-up of balloons inflating">
    <ul class="tags">
      <li>balloons</li>
      <li>inflating</li>
      <li>green</li>
      <li>blue</li>
    </ul>
  </div>
  <div class="card">
    <img src="https://raw.githubusercontent.com/mdn/css-examples/master/learn/tasks/grid/balloons4.jpg" alt="a balloon in the sun">
    <ul class="tags">
      <li>balloon</li>
      <li>sun</li>
      <li>sky</li>
      <li>summer</li>
      <li>bright</li>
    </ul>
  </div>
</div>
 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;
 }

 .card > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
 }

 .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;
 }

 .container {
    display: grid;
    grid-template-columns: repeat(3, minmax(100px, 12em));
    gap: .5em;
 }

 .tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
 }

@boknowpyro I’d be happy to give you a review, but can you please put your code into some kind of an online code editor/sharing app like codepen or jsfiddle, so I can see it running live?

and can you also include the URL of the page the assessment is on?

Thanks!

1 Like

For some reason I couldn’t get the link to post.
that’s i tried the code. i’m trying again.

https://codepen.io/boknowpyro/pen/ExVorqy

@boknowpyro cool, I can see this now — thanks!

So, your flexbox usage on the tags is perfect.

For the grid layout — this looks fine on a wide viewport, but goes a bit strange on a narrower viewport. Have a look at our answer — the column definition is simpler, and is more responsive.

Excellent! Thanks!

I actually had the same rules for the grid layout and thought I had it wrong. I didn’t put the gap in at the time either.

I have to work on keeping things simpler and trust myself a bit more.

I have to work on keeping things simpler

Yup - the best solution is always the simplest available :wink:

and trust myself a bit more.

Absolutely — looks like your skills are coming on great, and you have a lot to be proud of.

1 Like