Similar to "Text-Wrap: Balance" or "Text-Wrap: Pretty" but for Flexbox or Grid Layout Models
When displaying any number of elements (whether all elements are the same width or not) using CSS grid, I'd like an efficient way of displaying them so that they wrap in a smart way so that they look more balanced. Both "text-wrap: balance" and "text-wrap: pretty" do its best to eliminate single words on a new line in a wrapped paragraph of text. Balance aims to balance the number of characters on each line, and Pretty tries to favor good typography and keep from having a single word be all by itself on the last line. I'd like to be able to achieve this with elements so that it can do its best keep a single element from being by itself on the last line. In most cases, I'd like the "Balance" method so that the group of elements can look better together as a harmonious block of elements rather than have every row but the last take as much horizontal space as possible but end up leaving a single element in the last row. Anyone know a good way to do this?
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
