Css grid essentials 6/15


#1

https://www.codecademy.com/courses/learn-css-grid/lessons/css-grid-i/exercises/fraction?action=lesson_resume&course_redirect=learn-css

My code works, I would like a further explanation of instructions,

  1. Change your rows so that each row will take up the exact same fraction of the available space. HINT: Each row should take 1fr of space.

I DONT UNDERSTAND:

In this example, the grid will have three rows and three columns. The rows are splitting up the available 400 pixels of height into four parts. The first row gets two of those parts, the second column gets one, and the third column gets one. Therefore the first row is 200 pixels tall, and the second and third rows are 100 pixels tall.

I THINK THEY HAVE THAT PARAGRAPH WORDED WRONG…??? IS IT???

grid-template: 2fr 1fr 1fr / 1fr 3fr 1fr;

height: 400px

The 2fr 1 fr 1fr === first row gets 200px, second row gets 100px, third row gets 100px

200 + 100 + 100 = 400px total height of the .grid rows? am i correct? Is this the right way to think about it???

grid-template: 2fr 1fr 1fr / 1fr 3fr 1fr;

grid-template: 2fr 1fr 1fr / 1fr 3fr 1fr;
                ^   ^   ^     ^   ^   ^
               row row row   col col col

Is that right? are rows before the slash and colums after.?

.grid {
  display: grid;
  border: 2px blue solid;
  width: 400px;
  height: 500px;
  grid-template: 1fr 1fr 1fr / 3fr 50% 1fr;
}

.box {
  background-color: beige;
  color: black;
  border-radius: 5px;
  border: 2px dodgerblue solid;
}

#3

Yes, in the same fashion that JS arrays are typically referenced by row, then column.

const array = [[1, 2], [3, 4], [5, 6]];

console.log(array[2][1]);    // 6

Don’t let that little bit of script code throw you off. Once you get into JavaScript it will all unfold.


#4

Well then that would mean Codecademy has there explaniation in the following paragraph worded wrong: ???
Paragraph: In this example, the grid will have three rows and three columns. The rows are splitting up the available 400 pixels of height into four parts. The first row gets two of those parts, the second column gets one, and the third column gets one. Therefore the first row is 200 pixels tall, and the second and third rows are 100 pixels tall.

It Should be worded as follows:
In this example, the grid will have three rows and three columns. The rows are splitting up the available 400 pixels of height into four parts. The first row gets two of those parts, the second ROW gets one, and the third ROW gets one. Therefore the first row is 200 pixels tall, and the second and third rows are 100 pixels tall.

AM i right? that paragraphed is worded wrong???

Thats where my confusion is coming from. Codecademy is referring to the
grid-template: 2fr 1fr 1fr / 1fr 3fr 1fr;

Where everything before the slash is rows === 2fr 1 fr 1fr
and
Where everything after the slash is colums === 1fr 3fr 1fr

Right???

Im trying to grasp my head around it. At the same time not trying let it throw me off. I look forward to more CSS and Javascript.


#5

If it makes you feel any better, that would appear so. Have you used the Reporting tool to inform CC of this typo in the instruction text? They are the ones who can fix it, not the folks in the forums. Use the Bug Reporting tool and stop bringing up issues that we cannot resolve It is disruptive and pointless.


#6

Thank you. I have not used the reporting tool. I will from now on. I was confused so I asked on the forums. I understand how its operating now.


#7

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