Grid in columns issues

[JayPanoz]

Disclaimer: I’m primarily doing ebooks, which means columns are used at the :root level to paginate contents. Since there is nothing else to manage paged media in ebooks apps, I guess this is one of the major use cases for CSS3 multicol at the moment (and authors don’t have any choice). However, the following bugs happen in multicol anyway (they’re not scoped to ebooks, they apply to the web as well).

From experience, modern layout specs (flexbox + grid) have quite a significant number of rendering issues in multi-columns. I’ve started searching for grid issues but am very likely to follow up with flexbox issues in the next weeks. At first sight, a lot of those issues are related to fragmentation.

This is what happens when you’re using something like

element {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
}

Chrome (reference)

This is the expected result.

Now in Firefox…

Surprisingly, it looks like the element is pushed to the next column (while it could fit in the current one).

And finally Safari…

As you can see, text overflows and is clipped. If you reverse the order and apply a border to the text’s container (a figcaption there), it is however computed as expected:

But for some reason, text doesn’t wrap.

More generally, using flex or grid in columns is the surest way to have contents cut-off in multicol. Unfortunately, It seems implementers pay very little attention to the multicol context when implementing the new layout specs. :-(

[rachelandrew]

Thanks for these - it is definitely going to be worth doing some testing with multicol + newer specs, and making sure these issues get raised against the relevant spec (if it is a grid/flex issue) and in browsers where it is an interop issue.

[JayPanoz]

Ah, I just realized that this happens when 1. column’s height is constrained and 2. there are overflow columns. Consequently, I’ll try to check issues I may report without those conditions to see whether they make a difference or not.