CSS Grids: Fractions Suggestion


#1

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

This is a suggestion for improvement for this exercise. Please read below.

I find the explanation for the example fractions code snippet a little confusing. I’m not referring to the one in the code editor, but the one demonstrated in the explanation of fractions.

.grid {
  display: grid;
  width: 1000px;
  height: 400px;
  grid-template: 2fr 1fr 1fr / 1fr 3fr 1fr;
}

The explanation reads 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 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.

Each column’s width is a fraction of the available space. In this case, the available space is split into five parts. The first column gets one-fifth of the space, the second column gets three-fifths, and the last column gets one-fifth. Since the total width is 1000 pixels, this means that the columns will have widths of 200 pixels, 600 pixels, and 200 pixels respectively.

The Rows
I can understand how the row is described as being divided into “four parts.” 2 + 1 + 1 = 4. But, it’s confusing because you only see 3 values. When I see “four parts” my mind somehow assumes 4 different values are being talked about.

The part that really confuses me is where it says, “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.” We’re talking about row space usage and somehow we end up bringing columns into this. I think that this is a mistake?

The Columns
I think the second paragraph explains it better with the example pixel usage given. The only part I would get rid of is where it says, “In this case, the available space is split into five parts.” Are there truly five parts that you can work with within the code? I don’t see it that way. I don’t think I could assign data into each of the (3) 1/5 spaces of the second column. It’s essentially only a single space of data, correct?

Anyways, my point is that I think that it may be over explaining the division of spaces when it should focus on how many divisions there are based on the actual code - a 3 x 3 grid.


#2

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