Menu

Post image 1
Post image 2
Post image 3
Post image 4
Post image 5
Post image 6
Post image 7
Post image 8
Post image 9
Post image 10
1 / 10
0

Looking at New CSS Multi-Column Layout Wrapping Features

CSS-Tricks·Abhishek Pratap Singh·about 2 months ago
#ICOj6xVV
#css-tricks#x26a0#xfe0f#code#column#tricks
Reading 0:00
15s threshold

Multi-column layouts have not been used to their full potential, mostly because once content exceeded a limit, multi-column would force a horizontal scroll. It’s unintuitive and a UX no-no, especially on the modern web where the default scroll is vertical. Take the following case for example: CodePen Embed Fallback The CSS code for that might look something like this: body { max-width: 700px; } .article { column-gap: 10px; column-count: 3; height: 350px; } When the content size exceeds the body container, multi-column creates additional columns and a horizontal scroll. However, we finally have the tools that have recently landed in Chrome that “fix” this without having to resort to trickier solutions.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More