Assessment needed for TASK - 2 of Grid

MDN Learn
,
#1

It is difficult for me to visualize the grids…so, I draw it on paper.
How can I better understand and visualize it.
Below is my codepen of this task:
https://codepen.io/akku2002/pen/YzvVoaY

One thing I want to ask about the fr unit.
1.) It doesn’t allow overflow of grid items inrespect to other units.
2.) It evenly distribute the available space
Q. What is available space here ?
Q. If I give grid-template-columns: 1fr 1fr 1fr to grid container then it would evenly distribute the space among three colums…but it is not applicable in below example:
https://codepen.io/akku2002/pen/BaVRgGM
Here the first column is taking more width then rest because it has more content but due to that the responsiveness of the website become null… when I try to resize the window size.
How to make all 3 columns of equal size even if they contain different amount of content?
(edit)
When I try to give minmax() function inorder to make the size of all 3 columns equal then it’s content become overflow.
What to do, below is the code ?
https://codepen.io/akku2002/pen/poKPMzg
Please Explain me…I’m in need.

#2

Hi @Akku_2002 and welcome to the community :wave:

Firstly, you solved the task correctly. :+1:
Secondly, When you have a grid you can display the lines, numbers and names in Firefox DevTools. This can be done by either

The widths of the columns with fr are the last ones that get set. If you have grid-template-columns: 200px 50% 1fr; and the grid container is 1000px wide with no gaps, then the columns would result in 200px, 500px and the remaining 300px for the 1fr. When we have grid-template-columns: 200px 50% 1fr 1fr; Then the remaining 300px would be equally divided to 150px and 150px. The other columns would still be the same width as before.

Since there are no spaces in this long word the browser won’t break the line. It decides including the whole word is more important than having equally sized columns.
If you add spaces or use something like word-break: break-all;, it will give you three equally wide columns, again.

The rule to have at least 200px width columns is “stronger” than the “1fr” rule from before. Therefore the browser will set the width to 200px and let the word overflow.

I hope that clears thinks up a bit. :slightly_smiling_face: Feel free to ask more questions.

Have a nice day,
Michael

#3

Thankyou very much @mikoMK
How to come up with this kind of clear mindset. Any basics which I’m forgetting or any documentation you prefer to read in order to handle these kind of concepts then please let me know.
In the minmax() Question,I want to ask a question:

First 200px is distributed among each columns after that the remaining space must be distributed which is the available space among each columns. Then why overflow ocurred.

#4

The remaining space has to be distributed equally between the remaining columns because of the 1fr. I guess the case with 1fr 1fr 1fr and the long word is kind of special. Normally, you can assume that columns with 1fr (or minmax(...,1fr) ) have the same width.
You often see minmax() used with card layouts where you want all the cards to be of equal width, but not smaller than a certain value. For this you could use for example:

grid-template-columns: repeat(auto-fill,minmax(300px, 1fr));

The auto-fill will make sure that another card is added to the row as soon as there is more space available (but still having a minimum of 300px). Here is some code from another learner that shows it in action. Resized the browser window to see how it works: https://codepen.io/vusithedev/pen/xxWNorY

How to come up with this kind of clear mindset. Any basics which I’m forgetting or any documentation you prefer to read in order to handle these kind of concepts then please let me know.

I’m no expert but like to read about details on MDN. I also read some web technology blogs/news [1]. I think the most important thing is being curious about the technology and trying out code in CodePen (or similar), change it, observe the difference and learn from the it. For example I didn’t come across your text overflow issue in grid before, but started playing around with your code to understand it better. And I have read about or used word-break before, so this came to mind as a possible solution.

[1] https://css-tricks.com, https://web.dev, https://webplatform.news