| <!DOCTYPE html> |
| <style> |
| section { |
| display: inline-block; |
| width: 100px; |
| height: 400px; |
| border: 2px solid purple; |
| columns: 2; |
| column-gap: 20px; |
| column-rule: 20px solid transparent; |
| } |
| |
| .gap { |
| background-color: orange; |
| block-size: 10px; |
| } |
| |
| .p { |
| block-size: 195px; |
| background-color: lightgreen; |
| } |
| </style> |
| |
| <section> |
| <div class="p"></div> |
| <div class="gap"></div> |
| <div class="p"></div> |
| <div class="p"></div> |
| <div class="gap"></div> |
| <div class="p"></div> |
| </section> |
| |
| <section> |
| <div class="p"></div> |
| <div class="gap"></div> |
| <div class="p"></div> |
| <div class="p"></div> |
| <div class="gap"></div> |
| <div class="p"></div> |
| </section> |
| |
| <section> |
| <div class="p"></div> |
| <div class="gap"></div> |
| <div class="p"></div> |
| <div class="p"></div> |
| <div class="gap"></div> |
| <div class="p"></div> |
| </section> |
| |
| <section> |
| <div class="p"></div> |
| <div class="gap"></div> |
| <div class="p"></div> |
| <div class="p"></div> |
| <div class="gap"></div> |
| <div class="p"></div> |
| </section> |
