Problem with CSS Grid Garden exercise

HTML-CSS
1

Hi,

Can you help me on this CSS Garden exercise?

I don’t understand what is asked…

https://cssgridgarden.com/#en

Exerciese Number 24…

" When columns are set with pixels, percentages, or ems, any other columns set with fr will divvy up the space that’s left over.

Here the carrots form a 50 pixel column on the left, and the weeds a 50 pixel column on the right. With grid-template-columns , create these two columns, and use fr to make three more columns that take up the remaining space in between."

#garden {
  display: grid;

  grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
  grid-area: 1 / 1 / 6 / 2;
}

#poison {
  grid-area: 1 / 5 / 6 / 6;
}
2

You need to make 5 columns total. The farthest left and right should be 50px wide. The rest should take even spaces between them using fr unit.

Try solving them now, if you get stuck again here is the solution.

grid-template-columns: 50px 1fr 1fr 1fr 50px;

4 Likes
3