Https://www.freecodecamp.org/learn/responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap

Hi all,

there’s something about the challenges “CSS Grid: Create a Row Gap using grid-row-gap” and " CSS Grid: Create a Column Gap Using grid-column-gap" I don’t quite understand.

It’s not about the solution itself but about the code already there in that challenge.

That’s the code presented:

.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
/* Only change code below this line */

/* Only change code above this line */

}

Here’s the graphic showing the outcome:

grafik

What I don’t understand is, why the graphic shows only two rows. Isn’t the code grid-template-rows: 1fr 1fr 1fr; suppose to create three rows???

Thanks for your help!
Sarah

Ah, or is the third row invisible because there aren’t enough items???

Yup. You can fiddle around by adding and removing elements to see what happens.

Thank you!!! :slight_smile: