Display:grid and display:table-column aren't working

Question

There's a not in the last lesson of the display property saying "There are plenty of other display values, such as list-item, table, table-cell, table-column, grid, etc....." but I think that the two values of grid and table-column aren't working.

Also I don't see the difference between the value inline and inline block and table cell, and between table and list-item.
That's my code: https://code.sololearn.com/Wo0y46B5oKVx

Best Regards.

Answer 1

Hey, I doesn't make attention to the 'grid' value for the 'display' property ^^
However, notice that MDN tell:
"CSS Grid is still an experimental technology - most browsers require a flag to be enabled to make use of this API."
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

Anyway, you must study how work a display type before just applying it "to see"... Some have complex behaviour that you must know :P
The 'table' values family must be used on element with the same rules of imbrication as <table> html element family.

The 'display;table-family' is a powerfull but complex feature, as the 'position:relative/absolute' is, and probably the 'display:grid'... but not really supported.
https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

The 'flexbox' layout module is another new possibility to organize your content ( and to vertical center ) that you should look at too ;)
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

Answer 2

Thanks for your detailed answer.
Have a nice day :)