Grid-template-columns task

HTML-CSS
1

I have attempted this task no less than 42 times now . I have went back to repeat elements and read through in case im missing something. I still cant get my head around this task. the example that is shown in the task does not help at all and the hint solution has my head around in circles. If someone can tell me the solution please than i think i will understand the actual task. Its times like this you want to just throw the towel in and admit defeat,maybe this programming is not for me??

  **Your code so far**

<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}

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

  grid-template-columns: repeat(3, 1fr);

  /* Only change code above this line */
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 10px;
}
</style>

<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.63 Safari/537.36

Challenge: Limit Item Size Using the minmax Function

Link to the challenge:

1 Like
2

Please show the code that you tried.

3

I think, it’s better to take a break.

Edit: there may be a possibility that the browser you are using, or if you have extensions affecting the page layout, make you fail the test. can you try it in different browser or disable the extensions.

But to answer you, it’s against the forum policy to give answers. But it isn’t against you to seek more info from the docs. So take a minute for a breather and challenge it with a fresher mind. You got it. :+1:

4

This is my answer : grid-template-columns: 3 minmax(90px, 1fr);

5

Your code missing the repeat function from previous challenge.

Click Reset All Code, then try to change 1fr value.

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.