Problem: Balanced Multi-Column Content with CSS Columns
Problem description
A block of text inside a .container needs to be displayed in exactly three columns. The text must flow evenly so that all columns appear balanced in height, even if paragraph lengths vary.
Goal
Implement a three-column layout where column-fill: balance ensures even distribution of content height across all columns.
Constraints
Only CSS may be modified; do not alter HTML or use JavaScript.
Sample visual output
Here’s what the output would look like:
Good luck trying the problem! If you’re unsure how to proceed, check the Solution.
Problem: Balanced Multi-Column Content with CSS Columns
Problem description
A block of text inside a .container needs to be displayed in exactly three columns. The text must flow evenly so that all columns appear balanced in height, even if paragraph lengths vary.
Goal
Implement a three-column layout where column-fill: balance ensures even distribution of content height across all columns.
Constraints
Only CSS may be modified; do not alter HTML or use JavaScript.
Sample visual output
Here’s what the output would look like:
Good luck trying the problem! If you’re unsure how to proceed, check the Solution.