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?
2 Replies
There's no way of doing this currently. There are ongoing discussions right now that will make it possible though! Not that that helps you right now, lol.
It's all part of the new
item-* stuff, with what you're after being called item-pack: balance; - if you're curious, you can read all about it here.WebKit
Item Flow, Part 1: A new unified concept for layout
CSS Grid and Flexbox brought incredible layout tools to the web, but they don’t yet do everything a designer might want.