[csswg-drafts] [css-multicol] column-span: <integer> (#11474)

scottkellum has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-multicol] column-span: <integer> ==
In [CSS Multicolumn, column-span](https://www.w3.org/TR/css-multicol-2/#column-span) it would be useful to have the ability to create content that spans a specified number of columns using an <integer>. It is common to have images span two or three text columns in print.

I would expect this to work where the vertical and starting position coincides with where the `block` element falls in the column, then clears subsequent adjacent columns at that position of content to expand into like a float. This would likely be commonly used with `break-before: column; height: 100%;` styles to create a full height block.

Example of a print layout with images spanning two columns:

[![print layout example showing images spanning two text columns](https://i0.wp.com/tirsogamboa.com/wp-content/uploads/2020/12/TIRSO_magazinedesign_2A.jpg?fit=1200%2C858&ssl=1)](https://tirsogamboa.com/how-to-design-a-magazine-layout-like-a-true-editorial-designer/)

It is possible to hack this functionality into some browsers (Chrome) by using `<figure>` and `::before` and `::after` pseudo elements alongside `break-before` and `break-after`, thus clearing columns for the figure to expand into. https://codepen.io/scottkellum/pen/qBQYyGO?editors=1100

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11474 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 10 January 2025 06:14:06 UTC