Assessment wanted for CSS flexbox and grid comprehension test

Could someone kindly check my work on Task 4 of CSS Flexbox and Grid comprehension test?

I have a question. (also written in my CSS sheet.)

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? :fearful:
Is the grid layout of <card> necessary in the first place?

Thank you for your help!

My work
(Images were not given for downloading so I put background colour instead.)

Assessment page (Task 4)

Hi @Risa

From what I understand, the grid-template-rows: 200px min-content; has just defined 2 rows and set the heights of the rows. If you removed it and used just

.color {grid-row: 1} and .tags {grid-row: 2;}, you would have to still set the heights individually to both .color and .tags

2 Likes

Hi @Risa

I’m probably misunderstanding something, because I don’t see these line in the starting code. Generally, placements are not necessary when we just want to place each element into its own cell (and the order of elements will stay the same)

Most of the time there are multiple ways to achieve something. You can definitively make this work without Grid on the cards.

Now let’s have a look at your code:

  • Since the task asks to use Grid and Flexbox it would be a good idea to make the .container a grid with three columns.
  • As by the solution picture the tags are centered. Do you know which property could help to achieve this?

Have a nice day,
Michael

1 Like

Sorry @vusithedev
I missed that you have already answered. :grin:

1 Like

Thank you @vusithedev! :blush:
Now I understand that the declaration was setting rows and their height, otherwise I had to define in some other way.

Thank you @mikoMK as always!
What a lucky student am I, having two teachers kindly replying :blush:

What I meant was that I didn’t understand what
grid-template-rows: 200px min-content;
(in the original) was doing, but now I understand that it was defining .cards as grids and the number and heights of the rows inside them. :slight_smile:

I think the reason why I struggled to understand that was that I didn’t know that placements were not always necessary. Thank you for clearing that out!

I made a new Pen and fixed two things

  • Used grid to style .container.
  • Centring tags by using justify-content: center;.

Thank you so much!

1 Like

Great improvements! :+1:

1 Like