{"id":72394,"date":"2019-11-02T04:15:20","date_gmt":"2019-11-02T11:15:20","guid":{"rendered":"http:\/\/www.taterboy.com\/blog\/2019\/11\/things-we-cant-yet-do-in-css\/"},"modified":"2019-11-02T04:15:20","modified_gmt":"2019-11-02T11:15:20","slug":"things-we-cant-yet-do-in-css","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2019\/11\/things-we-cant-yet-do-in-css\/","title":{"rendered":"Things We Can\u2019t (Yet) Do In CSS"},"content":{"rendered":"<link rel=\"canonical\" href=\"https:\/\/www.smashingmagazine.com\/2019\/11\/css-things-cant-yet-do\/\"><title>Things We Can\u2019t (Yet) Do In CSS<\/title><\/p>\n<article>\n<header>\n<h1>Things We Can\u2019t (Yet) Do In CSS<\/h1>\n<address>Rachel Andrew<\/address>\n<p>                  <time datetime=\"2019-11-01T17:00:00+02:00\">2019-11-01T17:00:00+02:00<\/time><time datetime=\"2019-11-02T11:06:17+00:00\">2019-11-02T11:06:17+00:00<\/time><\/header>\n<p>Building \u201cmagazine-style layouts\u201d by using CSS Grid has become something of a pastime of CSS fans, keen to play with the capabilities of new Grid Layout. It\u2019s something I\u2019ve done myself as well as with people who\u2019ve attended my workshops. However, I always have to pick the layouts carefully because, in truth, there are a number of very common print layout patterns that we can\u2019t currently do on the web.<\/p>\n<p>In a lot of cases, however, we can do these things <em>with CSS<\/em> \u2014just not on the web. If you have read some of my previous articles, such as \u201c<a href=\"https:\/\/www.smashingmagazine.com\/2015\/01\/designing-for-print-with-css\/\">Designing For Print With CSS<\/a>\u201d, you\u2019ll be aware that CSS is also used for print formatting via user agents designed for outputting to PDF. These user agents have often implemented specifications or extensions to specifications that have never been implemented in continuous media, such as the scrolling and non-paged content that we have on the web.<\/p>\n<p>In addition, we have some CSS specifications that haven\u2019t yet been implemented by a browser or have only been implemented in an experimental way on one browser. We also have some things which are just at the discussion phase, perhaps as a note in the current level of a spec as to where we might take it in future.<\/p>\n<p>So while most of my articles are about things we <em>can<\/em> do, this one is about things we can\u2019t but that perhaps we might be able to do in the future. Take a look.<\/p>\n<div data-component=\"FeaturePanel\" data-audience=\"non-subscriber\" data-remove=\"true\"><\/div>\n<h3>Floating Things From Specific Points<\/h3>\n<p>On the web, a floated element is taken out of flow and following text wraps around it (due to the line boxes of the following text becoming shortened). Therefore, you only have the option to float a thing to the left or right.<\/p>\n<p>In print, however, you often need to float items to specific places on the page. For example, by floating an element to the top or bottom of a page.<\/p>\n<p>When creating a printed document, you define the size of your pages by using the <code>@page<\/code> rule, and then your content flows into those pages. By increasing the amount of content or the font size of the text, more pages will be created. Therefore, you might have an element that you know you want to display at the top of the page it appears in, but don\u2019t know exactly on which page it will be.<\/p>\n<p>The CSS Specification that deals with this behavior is called <a href=\"https:\/\/drafts.csswg.org\/css-page-floats\/\">Page Floats<\/a>. Your image would display in the normal flow of the content \u2014 just as on the web \u2014 except that the content is fragmented into pages. When the page with the image is encountered, the image is moved out of the normal flow and floated to the top of the page where it appears on. (Content that would have been above the image will display below it and normal flow resumes.)<\/p>\n<pre><code>img {\n    float-reference: page;\n    float: top;\n}\n<\/code><\/pre>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/e2f4eef3-eb49-4ff1-8628-5102d8281928\/page-floats-diagram.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/page-floats-diagram.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/e2f4eef3-eb49-4ff1-8628-5102d8281928\/page-floats-diagram.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/e2f4eef3-eb49-4ff1-8628-5102d8281928\/page-floats-diagram.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/e2f4eef3-eb49-4ff1-8628-5102d8281928\/page-floats-diagram.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/e2f4eef3-eb49-4ff1-8628-5102d8281928\/page-floats-diagram.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/page-floats-diagram.png?w=900\" sizes=\"100vw\" alt=\"A diagram showing two pages, one with an image partway through the content the other with the image at the top\"><\/a><figcaption>\n      On the left is the image in normal flow, using Page Floats it can be made to appear at the top of the page with the rest of the content coming after it (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/e2f4eef3-eb49-4ff1-8628-5102d8281928\/page-floats-diagram.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>There is an issue raised against the Page Floats specification to rename it, as there are use cases for this kind of pattern continuous media, e.g. in a multicolumn layout. Currently, if you float an item inside a column, it behaves in the same way as a float in regular normal flow. Assuming there is room, the line boxes of the following items will be shortened and text will wrap around the float within the column.<\/p>\n<p>By using a \u201cpage float\u201d, we could float an item to the top of the column that could give you much more control over the placement of elements within the flow of content in a multicolumn context.<\/p>\n<p>Columns are essentially just like pages; we fragment our content between column boxes in the same way that we fragment our content between pages. Therefore, a more generic name would make sense in terms of this behavior being the same for columns and pages.<\/p>\n<p>There are more examples of Page Floats in the excellent exploration of the subject, \u201c<a href=\"https:\/\/www.pagedmedia.org\/page-floats\/\">Paged Media Approaches: Page Floats<\/a>\u201d by Julie Blanc.<\/p>\n<h3>Overflow In The Block Dimension For Multicol<\/h3>\n<p>The concept of \u201cpage\u201d floats, would be even more necessary if we were to implement block dimension overflow columns in Multicol. Currently, if you fix the height of a multicol container, additional columns will be created in the inline direction causing an inline scrollbar.<\/p>\n<figure>\n<p data-height=\"500\" data-theme-id=\"light\" data-slug-hash=\"mazQda\" data-user=\"rachelandrew\" data-default-tab=\"result\">See the Pen <a href=\"https:\/\/codepen.io\/rachelandrew\/pen\/mazQda\">Smashing Multicol: overflow columns<\/a> by Rachel Andrew (<a href=\"https:\/\/codepen.io\/rachelandrew\">@rachelandrew<\/a>) on <a href=\"https:\/\/codepen.io\/\">CodePen<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/rachelandrew\/pen\/mazQda\">Smashing Multicol: overflow columns<\/a> by Rachel Andrew (<a href=\"https:\/\/codepen.io\/rachelandrew\">@rachelandrew<\/a>) on <a href=\"https:\/\/codepen.io\/\">CodePen<\/a>.<\/figcaption><\/figure>\n<p>As I describe in my article \u201c<a href=\"https:\/\/www.smashingmagazine.com\/2019\/01\/css-multiple-column-layout-multicol\/\">When And How To Use Multiple-Column Layout<\/a>\u201d, in the CSS Working Group we have considered how we might specify overflow in the block dimension. This would allow us to fix the height of the multicol container in the block dimension, and if there was more content that could fit, create another row of columns below and fill that with content.<\/p>\n<p>How does this tie into Page Floats? Well, in this scenario, you would want more control over where images and other elements end up in these rows of columns. I wouldn\u2019t want, for example, an image to have one line of text below it before the content, and then fragmented to form the next row of columns. Page Floats would enable me to specify that images in that situation would be floated to the bottom of the column or to the top of the first column in the new row.<\/p>\n<div><\/div>\n<h3>Spanning <code>n<\/code> Columns<\/h3>\n<p>In the next version of Firefox (Firefox 71), the <code>column-span<\/code> property from the Multiple-Column Layout specification is implemented, meaning that all of our web browsers implement <code>column-span<\/code>. The <code>column-span<\/code> property can take one of two values, <code>all<\/code> or <code>none<\/code>. If the value is <code>all<\/code>, it spans all of the columns; if it is <code>none<\/code> (which is the initial value), it doesn\u2019t span.<\/p>\n<p>What about multi-column layouts with elements that span <em>some<\/em> columns? This is a pattern I find in print design quite frequently. The spanning element will generally be at the top or bottom of the page, shortening the columns below or above it.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/2bb94c0e-a145-4780-a230-91b60108e583\/span-n-columns.jpg?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/span-n-columns.jpg 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/2bb94c0e-a145-4780-a230-91b60108e583\/span-n-columns.jpg 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/2bb94c0e-a145-4780-a230-91b60108e583\/span-n-columns.jpg 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/2bb94c0e-a145-4780-a230-91b60108e583\/span-n-columns.jpg 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/2bb94c0e-a145-4780-a230-91b60108e583\/span-n-columns.jpg 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/span-n-columns.jpg?w=900\" sizes=\"100vw\" alt=\"A photograph of a three column magazine layout, with a quote spanning two columns\"><\/a><figcaption>\n      A quote spans two columns in this article (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/2bb94c0e-a145-4780-a230-91b60108e583\/span-n-columns.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>This is not currently possible on the web, and we don\u2019t have a spec yet for this behavior, however, some print user agents have already implemented an extension to the spec to do this. By using Prince, I can use the following CSS to span two columns:<\/p>\n<pre><code>img {\n    float: column-top-corner;\n    column-span: 2;\n}\n<\/code><\/pre>\n<p>This would enable an element to be floated to the top corner using the Prince version of Page Floats, and then span two of the columns. The rest of the content flows into column boxes as is normal when using multicol. In Prince, the spanning of some columns is tied to floated elements; non-floated elements behave as per the Level 1 multicol spec and can only span <code>all<\/code> or <code>none<\/code>.<\/p>\n<p>Specifying this raises some interesting issues. Currently, when we introduce a spanner in multicol, the spanning element essentially creates a row of column boxes above it, and a row of column boxes below. The content doesn\u2019t jump over the spanning element and continue \u2014 as you can see in his next CodePen.<\/p>\n<figure>\n<p data-height=\"500\" data-theme-id=\"light\" data-slug-hash=\"YdJvgv\" data-user=\"rachelandrew\" data-default-tab=\"result\">See the Pen <a href=\"https:\/\/codepen.io\/rachelandrew\/pen\/YdJvgv\">Smashing Multicol: column-span<\/a> by Rachel Andrew (<a href=\"https:\/\/codepen.io\/rachelandrew\">@rachelandrew<\/a>) on <a href=\"https:\/\/codepen.io\/\">CodePen<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/rachelandrew\/pen\/YdJvgv\">Smashing Multicol: column-span<\/a> by Rachel Andrew (<a href=\"https:\/\/codepen.io\/rachelandrew\">@rachelandrew<\/a>) on <a href=\"https:\/\/codepen.io\/\">CodePen<\/a>.<\/figcaption><\/figure>\n<p>What should happen if we have an item spanning two out of three columns that is placed in the middle of the content? In many of the print examples I have seen, the content jumps the spanner when encountering these partial spans, rather than behaving as multicol does today.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/30f3f16f-4e3b-48c9-9e5c-0698cd85c474\/column-jumps-span.jpg?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/column-jumps-span.jpg 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/30f3f16f-4e3b-48c9-9e5c-0698cd85c474\/column-jumps-span.jpg 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/30f3f16f-4e3b-48c9-9e5c-0698cd85c474\/column-jumps-span.jpg 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/30f3f16f-4e3b-48c9-9e5c-0698cd85c474\/column-jumps-span.jpg 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/30f3f16f-4e3b-48c9-9e5c-0698cd85c474\/column-jumps-span.jpg 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/column-jumps-span.jpg?w=900\" sizes=\"100vw\" alt=\"A photograph of a magazine article\"><\/a><figcaption>\n      In this example, the column content jumps over the spanner and continues. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/30f3f16f-4e3b-48c9-9e5c-0698cd85c474\/column-jumps-span.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>There are further explorations of column-spanning and extensions ot floats in the <a href=\"https:\/\/figures.idea.whatwg.org\/\">CSS Figures<\/a> Living Idea document. In an older post of mine, I also explored some of these ideas, \u201c<a href=\"https:\/\/rachelandrew.co.uk\/archives\/2016\/06\/17\/thinking-about-page-floats-figures-regions-and-grids\/\">Thinking About Page Floats, Figures, Regions And Grids<\/a>\u201d.<\/p>\n<h3>Different Sized Columns In Multicol<\/h3>\n<p>Both Flexbox and Grid Layout give us the ability to do columns which are of different sizes that remain in proportion to one another as they flex. Multicol, however, can only split content into equal-sized columns. It is common in print design to have columns of unequal sizes.<\/p>\n<p>Now that Flexbox and Grid have this behavior it makes sense that multicol should follow suit and allow for different column sizes. Perhaps something to consider for level 2 of the Multicol specification.<\/p>\n<h3>Text Wrapping All Sides Of An Element<\/h3>\n<p>You will have trouble opening a magazine and not spotting something like the image below. Content wrapping all sides of a quote, callout or image. It is a very common pattern and seems reasonable as a pattern we might want to use on the web.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f7b61320-be18-4bf4-9d60-185d0f2bc0fd\/exclusions-print.jpg?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/exclusions-print.jpg 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f7b61320-be18-4bf4-9d60-185d0f2bc0fd\/exclusions-print.jpg 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f7b61320-be18-4bf4-9d60-185d0f2bc0fd\/exclusions-print.jpg 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f7b61320-be18-4bf4-9d60-185d0f2bc0fd\/exclusions-print.jpg 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f7b61320-be18-4bf4-9d60-185d0f2bc0fd\/exclusions-print.jpg 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/exclusions-print.jpg?w=900\" sizes=\"100vw\" alt=\"The article title is centered and wrapped by text set as two columns\"><\/a><figcaption>\n      Content wrapping three sides of a floated element in this article in Monocle (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f7b61320-be18-4bf4-9d60-185d0f2bc0fd\/exclusions-print.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>We do have a CSS Specification that enables this behavior. <a href=\"https:\/\/drafts.csswg.org\/css-exclusions\/\">CSS Exclusions<\/a>, at one time bundled with the CSS Shapes specification as CSS Exclusions and Shapes, defines the <code>wrap-flow<\/code> and <code>wrap-through<\/code> properties. Exclusions doesn\u2019t define positioning. Instead, you would use it with another positioning method \u2014 most likely CSS Grid Layout. This enables a pattern such as in the image below (taken in IE11):<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b0d78018-3120-4c9a-af4b-9de46b39197a\/exclusions-web.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/exclusions-web.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b0d78018-3120-4c9a-af4b-9de46b39197a\/exclusions-web.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b0d78018-3120-4c9a-af4b-9de46b39197a\/exclusions-web.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b0d78018-3120-4c9a-af4b-9de46b39197a\/exclusions-web.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b0d78018-3120-4c9a-af4b-9de46b39197a\/exclusions-web.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/exclusions-web.png?w=900\" sizes=\"100vw\" alt=\"An image wrapped on all sides with text\"><\/a><figcaption>\n      Exclusions in Internet Explorer 11 (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b0d78018-3120-4c9a-af4b-9de46b39197a\/exclusions-web.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p><strong>Note<\/strong>: <em>If you have a pre-Chromium Edge or Internet Explorer 11 installed, <a href=\"https:\/\/cdpn.io\/rachelandrew\/debug\/eYYeYYz\">see the CodePen example<\/a>.<\/em><\/p>\n<p>The above example works in Internet Explorer 11 (or pre-Chromium Edge) using the <code>-ms<\/code> prefixed grid version. Internet Explorer is the only browser to have attempted to implement the property. I am very keen to see implementations of exclusions. I think it solves a number of issues that we have with editorial layouts on the web.<\/p>\n<p><strong>Note<\/strong>: <em>For more, see my post \u201c<a href=\"https:\/\/rachelandrew.co.uk\/archives\/2018\/11\/09\/editorial-layouts-exclusions-and-css-grid\/\">Editorial Layouts, Exclusions and Grid<\/a>\u201d or read <a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/3308\">this issue<\/a> on the CSS Working Group Drafts repository.<\/em><\/p>\n<div><\/div>\n<h3>Disconnected Text Flows<\/h3>\n<p>Print design often includes content that flows in a similar way to multicol, however, the content boxes are not connected to each other.<\/p>\n<p>You can see an example below from the magazine Monocle:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/21b92536-273b-46f1-8fc0-181e4c1888ba\/regions-print.jpg?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/regions-print.jpg 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/21b92536-273b-46f1-8fc0-181e4c1888ba\/regions-print.jpg 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/21b92536-273b-46f1-8fc0-181e4c1888ba\/regions-print.jpg 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/21b92536-273b-46f1-8fc0-181e4c1888ba\/regions-print.jpg 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/21b92536-273b-46f1-8fc0-181e4c1888ba\/regions-print.jpg 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/regions-print.jpg?w=900\" sizes=\"100vw\" alt=\"A photograph of a magazine article with text, quotes and images in boxes\"><\/a><figcaption>\n      The content of this article flows between two boxes (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/21b92536-273b-46f1-8fc0-181e4c1888ba\/regions-print.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>This is very difficult to do on the web. If you know how much content you are likely to have, you can make these layouts using Grid in many cases. However, they are then fairly fragile; they rely on us understanding how much content we have and in breaking it up into separate HTML elements. This will usually require us to wrap chunks of content in a <code>div<\/code> in order to have an element to position on the grid.<\/p>\n<p>A more ideal scenario would be to keep the article as one (properly marked-up thread of content) which could flow into defined areas in the layout.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f21a0f50-6766-4fc8-b40d-ce321eaae122\/regions1.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/regions1.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f21a0f50-6766-4fc8-b40d-ce321eaae122\/regions1.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f21a0f50-6766-4fc8-b40d-ce321eaae122\/regions1.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f21a0f50-6766-4fc8-b40d-ce321eaae122\/regions1.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f21a0f50-6766-4fc8-b40d-ce321eaae122\/regions1.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/regions1.png?w=900\" sizes=\"100vw\" alt=\"A diagram showing some content on one side, which is then displayed in different boxes of the grid\"><\/a><figcaption>\n      An article which is then displayed in disconnected areas of the grid<br \/>\n    <\/figcaption><\/figure>\n<p>We do have a specification that details something like this: the <a href=\"https:\/\/drafts.csswg.org\/css-regions\/\">CSS Regions<\/a> specification. This was implemented in IE10 (and is therefore in pre-Chromium Edge), and was also in Chrome and WebKit before being removed. Can I use <a href=\"https:\/\/caniuse.com\/#feat=css-regions\">shows the state of affairs<\/a>.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/125dc76c-3cb2-4d7c-9adb-d154fb20abbd\/can-i-use-regions.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/can-i-use-regions.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/125dc76c-3cb2-4d7c-9adb-d154fb20abbd\/can-i-use-regions.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/125dc76c-3cb2-4d7c-9adb-d154fb20abbd\/can-i-use-regions.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/125dc76c-3cb2-4d7c-9adb-d154fb20abbd\/can-i-use-regions.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/125dc76c-3cb2-4d7c-9adb-d154fb20abbd\/can-i-use-regions.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/can-i-use-regions.png?w=900\" sizes=\"100vw\" alt=\"Chart showing that Regions was in several browsers but has now been removed\"><\/a><figcaption>\n      Can I Use CSS Regions (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/125dc76c-3cb2-4d7c-9adb-d154fb20abbd\/can-i-use-regions.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>There were some significant issues with the Regions specification in that it required HTML elements to be present to flow the content into. Unlike multicol, in which anonymous column boxes are generated to hold the content, Regions requires an existing HTML element to host the content. So while you did get the nice behavior of content flowing through these disconnected boxes, you still had to work out how many boxes you needed and create empty <code>div<\/code>s to hold that content.<\/p>\n<p>Your solution for more content than would fit would be to have a final auto-sized element to \u201cmop up\u201d this extra content without a home. This doesn\u2019t seem like a very elegant solution!<\/p>\n<p>For more information on the problems with the Regions spec as it currently stands, see \u201c<a href=\"https:\/\/alistapart.com\/blog\/post\/css-regions-considered-harmful\/\">CSS Regions Considered Harmful<\/a>.\u201d<\/p>\n<h4>A Future For Regions?<\/h4>\n<p>I would be very keen to see something like Regions make a comeback. I think that we know more now about the sorts of layouts that we want to build \u2014 now that we have Grid Layout. Regions would enable a sensibly marked-up article to flow through defined boxes in a grid layout, and enable exactly the sort of layouts we see in magazines. From the very simple \u2014 skipping a center column that contains a quote or image \u2014 to complex sets of boxes and images.<\/p>\n<p>In the Paged Media specification, we have a model for a defined box which is duplicated over and over to create as many pages as needed for the content we have \u2014 you don\u2019t need to define those pages upfront. In the developing idea for block dimension overflow columns in multicol, we are considering a model where new rows of columns can be created, as many as are needed until we run out of content. Could we see a future for Regions where we can define a pattern of areas and keep repeating that pattern until we run out of content to fill it?<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/45ef9ae9-3c7e-4587-ad61-37ccd14bec73\/regions2.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/regions2.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/45ef9ae9-3c7e-4587-ad61-37ccd14bec73\/regions2.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/45ef9ae9-3c7e-4587-ad61-37ccd14bec73\/regions2.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/45ef9ae9-3c7e-4587-ad61-37ccd14bec73\/regions2.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/45ef9ae9-3c7e-4587-ad61-37ccd14bec73\/regions2.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/regions2.png?w=900\" sizes=\"100vw\" alt=\"A diagram showing a longer article flowing through two grids of boxes\"><\/a><figcaption>\n      The article is flowed into the layout, once all the boxes are filled the pattern repeats<br \/>\n    <\/figcaption><\/figure>\n<p>Whatever solution is found for Regions, it would reply on solid support for Fragmentation in browsers. Once you break your content across Regions, you will be keen to avoid things like a heading becoming the last thing in a Region \u2014 with the associated content somewhere completely disconnected. As with the multicol ideas, I think it would also require support for Page Floats so that we\u2019re able to better control how certain elements display in a Region and stop orphan lines displaying below an image as the content fragments to another Region. In addition Regions would add to the potential of confusing <a href=\"https:\/\/tink.uk\/flexbox-the-keyboard-navigation-disconnect\/\">content re-ordering on the web<\/a>, therefore I think there are a number of related things to get right before we could see a robust and elegant solution to this problem.<\/p>\n<h3>Share Your Use Cases<\/h3>\n<p>I would love to know if you have use cases for any of the above types of layouts, or if there are other layouts you would love to do but are impossible (or only possible in a fragile way). Let me know in the comments \u2014 or even better \u2014 write up the issue on your own site and drop a link into the comments section below. Adding new features to CSS starts with understanding what the use cases and requirements are.<\/p>\n<p>You can also follow the discussion on all CSS specifications at the CSS Working Group GitHub repo and <a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\">Issues List<\/a>.<\/p>\n<div>\n  <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/logo-red-1.png?w=900\" alt=\"Smashing Editorial\"><span>(il)<\/span>\n<\/div>\n<\/article>\n<p class=\"wpematico_credit\"><small>Powered by <a href=\"http:\/\/www.wpematico.com\" target=\"_blank\">WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Things We Can\u2019t (Yet) Do In CSS Things We Can\u2019t (Yet) Do In CSS Rachel Andrew 2019-11-01T17:00:00+02:002019-11-02T11:06:17+00:00 Building \u201cmagazine-style layouts\u201d by using CSS Grid has become something of a pastime of CSS fans, keen to play with the capabilities of new Grid Layout. It\u2019s something I\u2019ve done myself as well as with people who\u2019ve attended&#8230;<a class=\"moretag\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/11\/things-we-cant-yet-do-in-css\/\"> Read the full article&#8230;<\/a><\/p>\n","protected":false},"author":4,"featured_media":72395,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[371],"tags":[],"class_list":["post-72394","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-experience"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"Things We Can\u2019t (Yet) Do In CSSThings We Can\u2019t (Yet) Do In CSS Rachel Andrew 2019-11-01T17:00:00+02:002019-11-02T11:06:17+00:00Building \u201cmagazine-style layouts\u201d by using CSS Grid has become something of a pastime of CSS fans, keen to play with the capabilities of new Grid Layout. It\u2019s something I\u2019ve done myself as well as with people who\u2019ve attended my workshops.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Guest Contribution\"\/>\n\t<meta name=\"keywords\" content=\"user experience\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/11\/things-we-cant-yet-do-in-css\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Things We Can\u2019t (Yet) Do In CSS | Design for Immersive Technologies\" \/>\n\t\t<meta property=\"og:description\" content=\"Things We Can\u2019t (Yet) Do In CSSThings We Can\u2019t (Yet) Do In CSS Rachel Andrew 2019-11-01T17:00:00+02:002019-11-02T11:06:17+00:00Building \u201cmagazine-style layouts\u201d by using CSS Grid has become something of a pastime of CSS fans, keen to play with the capabilities of new Grid Layout. It\u2019s something I\u2019ve done myself as well as with people who\u2019ve attended my workshops.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.taterboy.com\/blog\/2019\/11\/things-we-cant-yet-do-in-css\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-11-02T11:15:20+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2019-11-02T11:15:20+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Things We Can\u2019t (Yet) Do In CSS | Design for Immersive Technologies\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Things We Can\u2019t (Yet) Do In CSSThings We Can\u2019t (Yet) Do In CSS Rachel Andrew 2019-11-01T17:00:00+02:002019-11-02T11:06:17+00:00Building \u201cmagazine-style layouts\u201d by using CSS Grid has become something of a pastime of CSS fans, keen to play with the capabilities of new Grid Layout. It\u2019s something I\u2019ve done myself as well as with people who\u2019ve attended my workshops.\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/11\\\/things-we-cant-yet-do-in-css\\\/#article\",\"name\":\"Things We Can\\u2019t (Yet) Do In CSS | Design for Immersive Technologies\",\"headline\":\"Things We Can\\u2019t (Yet) Do In CSS\",\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/page-floats-diagram.png?fit=400%2C209&ssl=1\",\"width\":400,\"height\":209},\"datePublished\":\"2019-11-02T04:15:20-07:00\",\"dateModified\":\"2019-11-02T04:15:20-07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/11\\\/things-we-cant-yet-do-in-css\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/11\\\/things-we-cant-yet-do-in-css\\\/#webpage\"},\"articleSection\":\"User Experience\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/11\\\/things-we-cant-yet-do-in-css\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"position\":2,\"name\":\"User Experience\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/11\\\/things-we-cant-yet-do-in-css\\\/#listItem\",\"name\":\"Things We Can\\u2019t (Yet) Do In CSS\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/11\\\/things-we-cant-yet-do-in-css\\\/#listItem\",\"position\":3,\"name\":\"Things We Can\\u2019t (Yet) Do In CSS\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/\",\"name\":\"Guest Contribution\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/11\\\/things-we-cant-yet-do-in-css\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Guest Contribution\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/11\\\/things-we-cant-yet-do-in-css\\\/#webpage\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/11\\\/things-we-cant-yet-do-in-css\\\/\",\"name\":\"Things We Can\\u2019t (Yet) Do In CSS | Design for Immersive Technologies\",\"description\":\"Things We Can\\u2019t (Yet) Do In CSSThings We Can\\u2019t (Yet) Do In CSS Rachel Andrew 2019-11-01T17:00:00+02:002019-11-02T11:06:17+00:00Building \\u201cmagazine-style layouts\\u201d by using CSS Grid has become something of a pastime of CSS fans, keen to play with the capabilities of new Grid Layout. It\\u2019s something I\\u2019ve done myself as well as with people who\\u2019ve attended my workshops.\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/11\\\/things-we-cant-yet-do-in-css\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/page-floats-diagram.png?fit=400%2C209&ssl=1\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/11\\\/things-we-cant-yet-do-in-css\\\/#mainImage\",\"width\":400,\"height\":209},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/11\\\/things-we-cant-yet-do-in-css\\\/#mainImage\"},\"datePublished\":\"2019-11-02T04:15:20-07:00\",\"dateModified\":\"2019-11-02T04:15:20-07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Things We Can\u2019t (Yet) Do In CSS | Design for Immersive Technologies","description":"Things We Can\u2019t (Yet) Do In CSSThings We Can\u2019t (Yet) Do In CSS Rachel Andrew 2019-11-01T17:00:00+02:002019-11-02T11:06:17+00:00Building \u201cmagazine-style layouts\u201d by using CSS Grid has become something of a pastime of CSS fans, keen to play with the capabilities of new Grid Layout. It\u2019s something I\u2019ve done myself as well as with people who\u2019ve attended my workshops.","canonical_url":"https:\/\/www.taterboy.com\/blog\/2019\/11\/things-we-cant-yet-do-in-css\/","robots":"max-image-preview:large","keywords":"user experience","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.taterboy.com\/blog\/2019\/11\/things-we-cant-yet-do-in-css\/#article","name":"Things We Can\u2019t (Yet) Do In CSS | Design for Immersive Technologies","headline":"Things We Can\u2019t (Yet) Do In CSS","author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/page-floats-diagram.png?fit=400%2C209&ssl=1","width":400,"height":209},"datePublished":"2019-11-02T04:15:20-07:00","dateModified":"2019-11-02T04:15:20-07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/11\/things-we-cant-yet-do-in-css\/#webpage"},"isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/11\/things-we-cant-yet-do-in-css\/#webpage"},"articleSection":"User Experience"},{"@type":"BreadcrumbList","@id":"https:\/\/www.taterboy.com\/blog\/2019\/11\/things-we-cant-yet-do-in-css\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","position":1,"name":"Home","item":"https:\/\/www.taterboy.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","position":2,"name":"User Experience","item":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/11\/things-we-cant-yet-do-in-css\/#listItem","name":"Things We Can\u2019t (Yet) Do In CSS"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/11\/things-we-cant-yet-do-in-css\/#listItem","position":3,"name":"Things We Can\u2019t (Yet) Do In CSS","previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}}]},{"@type":"Organization","@id":"https:\/\/www.taterboy.com\/blog\/#organization","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","url":"https:\/\/www.taterboy.com\/blog\/"},{"@type":"Person","@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author","url":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/","name":"Guest Contribution","image":{"@type":"ImageObject","@id":"https:\/\/www.taterboy.com\/blog\/2019\/11\/things-we-cant-yet-do-in-css\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g","width":96,"height":96,"caption":"Guest Contribution"}},{"@type":"WebPage","@id":"https:\/\/www.taterboy.com\/blog\/2019\/11\/things-we-cant-yet-do-in-css\/#webpage","url":"https:\/\/www.taterboy.com\/blog\/2019\/11\/things-we-cant-yet-do-in-css\/","name":"Things We Can\u2019t (Yet) Do In CSS | Design for Immersive Technologies","description":"Things We Can\u2019t (Yet) Do In CSSThings We Can\u2019t (Yet) Do In CSS Rachel Andrew 2019-11-01T17:00:00+02:002019-11-02T11:06:17+00:00Building \u201cmagazine-style layouts\u201d by using CSS Grid has become something of a pastime of CSS fans, keen to play with the capabilities of new Grid Layout. It\u2019s something I\u2019ve done myself as well as with people who\u2019ve attended my workshops.","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/11\/things-we-cant-yet-do-in-css\/#breadcrumblist"},"author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"creator":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/page-floats-diagram.png?fit=400%2C209&ssl=1","@id":"https:\/\/www.taterboy.com\/blog\/2019\/11\/things-we-cant-yet-do-in-css\/#mainImage","width":400,"height":209},"primaryImageOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/11\/things-we-cant-yet-do-in-css\/#mainImage"},"datePublished":"2019-11-02T04:15:20-07:00","dateModified":"2019-11-02T04:15:20-07:00"},{"@type":"WebSite","@id":"https:\/\/www.taterboy.com\/blog\/#website","url":"https:\/\/www.taterboy.com\/blog\/","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","og:type":"article","og:title":"Things We Can\u2019t (Yet) Do In CSS | Design for Immersive Technologies","og:description":"Things We Can\u2019t (Yet) Do In CSSThings We Can\u2019t (Yet) Do In CSS Rachel Andrew 2019-11-01T17:00:00+02:002019-11-02T11:06:17+00:00Building \u201cmagazine-style layouts\u201d by using CSS Grid has become something of a pastime of CSS fans, keen to play with the capabilities of new Grid Layout. It\u2019s something I\u2019ve done myself as well as with people who\u2019ve attended my workshops.","og:url":"https:\/\/www.taterboy.com\/blog\/2019\/11\/things-we-cant-yet-do-in-css\/","article:published_time":"2019-11-02T11:15:20+00:00","article:modified_time":"2019-11-02T11:15:20+00:00","twitter:card":"summary","twitter:title":"Things We Can\u2019t (Yet) Do In CSS | Design for Immersive Technologies","twitter:description":"Things We Can\u2019t (Yet) Do In CSSThings We Can\u2019t (Yet) Do In CSS Rachel Andrew 2019-11-01T17:00:00+02:002019-11-02T11:06:17+00:00Building \u201cmagazine-style layouts\u201d by using CSS Grid has become something of a pastime of CSS fans, keen to play with the capabilities of new Grid Layout. It\u2019s something I\u2019ve done myself as well as with people who\u2019ve attended my workshops."},"aioseo_meta_data":{"post_id":"72394","title":null,"description":null,"keywords":null,"keyphrases":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_custom_url":null,"og_image_custom_fields":null,"og_custom_image_width":null,"og_custom_image_height":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"location":null,"local_seo":null,"created":"2021-02-07 17:02:34","updated":"2026-09-02 09:49:37","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"primary_term":null,"og_image_url":null,"og_image_width":null,"og_image_height":null,"twitter_image_url":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"limit_modified_date":false,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/\" title=\"User Experience\">User Experience<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tThings We Can\u2019t (Yet) Do In CSS\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.taterboy.com\/blog"},{"label":"User Experience","link":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/"},{"label":"Things We Can\u2019t (Yet) Do In CSS","link":"https:\/\/www.taterboy.com\/blog\/2019\/11\/things-we-cant-yet-do-in-css\/"}],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8wzr5-iPE","jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/page-floats-diagram.png?fit=400%2C209&ssl=1","_links":{"self":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/72394","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/comments?post=72394"}],"version-history":[{"count":0,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/72394\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media\/72395"}],"wp:attachment":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media?parent=72394"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/categories?post=72394"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/tags?post=72394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}