Advanced Multicol Use Cases

img { float: right }

img { float: right }

img { float: right }

img { float: right }

img { 
  position:absolute;
  bottom:0;  
  float-wrap:square; }

img { 
  float: bottom }

img {
  float: bottom
}

However, the specification doesn't require UAs to implement vertical floating within the containing block.

img { 
  position:page;
  bottom:0;  
  width:100%;
  float-wrap:square; }

img { 
  float: page bottom 
  width: 100% }

img { 
  float: bottom 
}

img { 
  float: page bottom;
  width: 
}

img { 
  position: page; 
  bottom:0; 
  right:0;
  float-wrap:square; }

img { 
  float: page bottom right }

img { 
  float: page bottom right;
}

table { 
  float: top next page }

table { 
  float: next page }

(top of page is default)

table { 
  float: top-next }

table { 
  float: next page top  }

object { 
  position:absolute;
  inside:0;
  float-wrap:square; }

object { float: inside }

object { float: inside }

object { float: inside }

object { 
  position: page; 
  top:0; 
  outside:0;
  float-wrap:square;  }

object { 
  float: page top outside }

object { 
  float: page top outside;
}

div.note { 
  float: next page unless-room }

div.note { 
  float: next page unless-room }

div.note { 
  float: top-unless-room }

div.note { 
  float: here, next page;
}

div.note { 
  float: next column unless-room }

div.note { 
  float: column-top-next-unless-room 
}

div.note { 
  float: none, next column; 
}

img { 
  float: hide unless-room }

img { 
  float: hide unless-room }

img { 
  float: none, hide;
}

img { float: left }

img { float: left }

img { float: left}

img { float: left}

div.note { 
  position:column;
  bottom:0;
  left:0;
  width:1gr;
  float-wrap:square; }

div.note { float: bottom column }

div.note { float: column-bottom }

div.note { float-vertical: bottom }

img {
  position:absolute;
  top:0;
  right:0;  
  float-wrap:square; }

img { 
  float: top right column }

img {
  position:absolute;
  top:0;
  right:1gr;
  float-offset:100%;
  float-wrap:square; }

Not possible. If deemed necessary, this construct (where the overloading of 'left and 'right' has been replaced with 'right-'):

img { 
  float: top left right-column }

img {
  position:absolute;
  top:0;
  right:0;
  width:1gr;
  float-wrap:square; }

img { 
  float: top right column;
  width: 1gr }

img {
  position:absolute;
  right:0;
  top:0;
  width:3gr; 
  float-wrap:square; }

img { 
  float: top right column;
  width: 3gr }

div.note { 
  position:absolute;
  bottom:0;
  width:100%;
  float-wrap:square; }

div.note { 
  float: bottom; 
  column-span: all }

div.note { 
  position:page;
  bottom:0;
  width:100%;
  float-wrap:square; }

div.note { 
  float: page bottom; 
  column-span: all }

div.note {
  float: bottom;
}

div.note { 
  position:absolute;
  bottom:0;
  left:0;
  width:1gr;
  float-wrap:square; }

div.note { 
  float: bottom left column }

div.note { 
  position:absolute;
  top:0;
  right:2gr;
  width:1gr;
  float-wrap:square; }

img { 
  float: top right column; 
  float-offset: 2gr 0; 
  width: 1gr }

newspaper { 
  columns: 3; 
  column-fill: auto }

newspaper { 
  columns: 3; 
  column-fill: auto }

newspaper { 
  columns: 3; 
  column-fill: auto }

newspaper { 
  columns: 3; 
  column-fill: balance }

newspaper { 
  columns: 3; 
  column-fill: balance }

newspaper { 
  columns: 3; 
  column-fill: balance }

(not possible)

can be done by reserving the last column with a float (empty or an ad)...

(not possible)

...another option is using named flows (with a container spanning 3 grid units)

(not possible)

img.large {
  position:absolute; 
  right:0;
  top:0;  
  width:3gr;
  float-wrap:square; }
div.caption { 
  position:absolute;
  top:0;
  right:2gr;
  width:1gr;
  float-wrap:square; }

img.large { 
  float: top right column; 
  width: 3gr }
div.caption { 
  float: top right column; 
  float-offset: 2gr
  width: 1gr }

img {
  position:absolute;
  top:0;
  right:0;
  width:3gr; }
.caption {
  position:absolute;
  top:0;
  right:0;
  float-offset: 100%; }

img {
  float: top right column;
  width: 3gr;
}
.caption {
  float: top right column;
  float-offset: -2gr
}

<div class=multicol>
 ...
  <div class=figure>
    <img ...>
    <p class=caption>
  </div>
  ...
</div>

.figure {
  position:absolute;
  top:0;
  right:0;
  width:3gr; }
.figure img {
  width:100%; }
.figure .caption {
  position:absolute;
  top:0.5gr;
  right:0;
  float-offset: 100%; }

.figure { 
  float: top right column;
  width: 5gr;
  float-offset: -2gr
}

.figure img {
  display: table-cell;
  width: 3gr;
}

.figure .caption {
  display: table-cell;
  vertical-align: middle;
}

.figure {
  position:absolute;
  top:0;
  right:0;
  width:3gr; 
  float-wrap:square;}
.figure img {
  width:100%; }
.figure .caption {
  position:absolute;
  bottom:0;
  right:0;
  float-offset: 100%; }

(As in the previous example, except that 'vertical-align' is set to 'bottom')

quote { 
  position:absolute;
  top:10em;
  left:2gr;
  width:1gr;
  float-wrap:square; }

quote { 
  float: top left column; 
  float-offset: 2gr 10em; 
  width: 1gr; }

quote { 
  position:absolute;
  top:0.5gr;
  left:2gr;
  width:1gr;
  float-offset:0 50%;
  float-wrap:square; }

quote { 
  float: top left column; 
  float-offset: 2gr 50%; 
  width: 1gr }

blockquote { 
  position:absolute;
  top:0.5gr;
  left:1.5gr;
  float-offset:50% 50%;
  float-wrap:square; }

blockquote {
  float: top left column;
  float-offset: 1.5gr 50% }

html { grid-columns: * (1em *)[3]; }
body { 
  width: 5gr;
  columns: 3; }
img { 
  position:absolute;
  top:0;
  right:0;
  width:1gr;
  float-wrap:square; }

@page :left { margin-left: 10em }
@page :right { margin-right: 10em }
body { columns: 3 }
img { float: top outside page }