Assessment wanted for Multicol 2

Link to skill test.

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.

Hello @Nohbdy

you doing great well done and here are my notice

  1. there issue in the preview area so i will ask @schalkneethling to help to fix this

  2. 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 :slight_smile:

1 Like

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:

Staff Community Manager - MDN Web Docs


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


thanks a lot @schalkneethling and have a nice day :slight_smile:

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

1 Like

@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:

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

Hello @jt_1

column-gap is the space/width/size between each column including the size of the rule which you set by column-rule

so using the same value from your css file

i draw the following image to illustrate what i mean earlier


hope that make it clear now and have a nice day :slight_smile:


Hey @justsomeone

I’m glad to see you again. :wave: Even if it’s just for a single post. :grin:

1 Like

Hi @mikoMK

glad to see you too boss the honor is mine


ops :joy:

see you when i see you boss and take care :smile:

1 Like

Thank you @justsomeone!

1 Like

you welcome @jt_1 :slight_smile: