Assessment wanted for Multicol 2

Nohbdy · April 21, 2022, 8:49pm

My code:

.container {
  column-width: 200px;
  column-gap: 10px;
  column-rule: 5px solid gray;
}

The instruction “ensuring there is 10px of space between the edge of the rule and the column content” is confusing and I don’t know whether to make a gap of 10 or 20 pixels.
If I make it 10, I get the three columns in the provided sample but the text in the second and third columns sit closer to the rule than in the sample.

A gap of 20 creates two columns but the text isn’t as close to the rule.

justsomeone · April 23, 2022, 3:15pm

Hello @Nohbdy

you doing great well done and here are my notice

there issue in the preview area so i will ask @schalkneethling to help to fix this
for the gap part the point :
a) the rule take part of the gap so if there there 20 gap and 5px for rule as you did it would look like if there 7.5px on right side of column then 5px for rule then another 7.5px for the left side of the next rule

they already mentioned it in the lesson but it hard to get it without use it

Something to take note of is that the rule doesn't take up any width of its own. It lies across the gap you created with column-gap. To make more space on either side of the rule, you'll need to increase thecolumn-gap size.

so the gap to be calculated it will be the double of the required space (one for the right side of column and another for left side of the next column) + the rule size if there is any

so the answer would be

.container {
  column-width: 200px;
  column-rule: 5px solid gray;
  column-gap: 25px;
}

hope that help and have a nice day

schalkneethling · April 23, 2022, 5:04pm

Apologies for the confusion created here @Nohbdy. As @justsomeone mentioned there is a layout problem with the editor in that page. While we resolve the problem, please feel free to use this Codepen to work on the assignment:

–
Schalk
Staff Community Manager - MDN Web Docs

schalkneethling · April 23, 2022, 5:39pm

I have opened an issue and pull request to resolve the layout problem.

justsomeone · April 23, 2022, 5:41pm

thanks a lot @schalkneethling and have a nice day

schalkneethling · April 23, 2022, 6:17pm

You are very welcome. Thank you for bringing the layout problem to my attention.

jt_1 · April 24, 2023, 2:05pm

@justsomeone @schalkneethling (or anyone)

Hi, I’m still not really clear on how to get:
column-gap: 25px;

I’m working on multicol skill test 3 now and had the same initial confusion as @ Nohbdy

Link to my code for reference:
https://codepen.io/jt_1/pen/NWOpbVZ

I’ve been trying to troubleshoot via the console log in Google Chrome to find how this is calculated. I haven’t been able to come to this answer/conclusion on my own.

Screenshot 2023-04-24 at 7.00.46 AM