| <!DOCTYPE html> |
| <style> |
| .multicol { |
| width: 60px; |
| -webkit-column-width: 20px; |
| -webkit-column-gap: 0; |
| column-fill: auto; |
| height: 60px; |
| } |
| .square { |
| width: 20px; |
| height: 20px; |
| background: green; |
| } |
| .layer { will-change: transform; } |
| </style> |
| |
| <p>There should a green square below.</p> |
| <div class="multicol"> |
| <div class="square"></div> |
| <div class="square"></div> |
| <div class="layer"> <!-- bottom of first column --> |
| <div class="square"></div> |
| </div> |
| <div class="square"></div> |
| <div class="layer"> <!-- middle of second column --> |
| <div class="square"></div> |
| </div> |
| <div class="square"></div> |
| <div class="layer"> <!-- entire third column --> |
| <div class="square"></div> |
| <div class="square"></div> |
| <div class="square"></div> |
| </div> |
| </div> |
