I was wondering what the main differences are when using columns and grids? Of course with grids, I’m aware you can add multiple rows, span them, have more flexibility, etc; however, I am unsure if using one over another has significant differences.
In a situation where I want to have content in two columns (i.e, heading/title in the left column, and paragraphs/longer text in the right) what’s the difference between using the columns element and a grid with two columns to do that?
As far as I understand, there is almost zero difference between using this two in your situation. You can even use flexbox. I would suggest to use the latter.
As for the difference between these two: frankly speaking, I have no idea, but I guess columns are basically flexbox, like a container block that is actually a div block with 900px width limit. Grids came out later, so I don’t think there is any reason to use columns now. Though, I would like to see an expert’s opinion on this matter.
Flex Box Layout (Orientation - If it cannot be accomplished with display block + margins)
The difference among these lies in the amount of CSS code the browser will have to read before displaying the elements correctly!
Multi-Col layouts take by the least amount of time to load because they are just ONE line of CSS! With CSS Grid and Flex Box the differences get interesting. Grid is better for more complex layouts, as it is more intuitive, simpler to use and better at structuring + can remove some of the styling that would need to be applied on child elements with flex box. However, for more simple orientation that cannot be achieved with regular display and margins - then flex box is better to use than grid because it is less code intensive for the browser to render!