HTML CSS examples for CSS Widget:Grid
fill vertical spaces between tiles in a grid system
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .container {<!--from w w w . j a va 2 s . com--> background:Chartreuse; width:401px; border:3px solid yellow; border-radius:3px; -webkit-column-count:3; -webkit-column-gap:5px; } .a { -webkit-column-break-inside:avoid; height:100px; width:151px; border:2px solid blue; background:lightgreen; margin:5px 0px; border-radius:3px; } .b { -webkit-column-break-inside:avoid; height:121px; width:151px; border:2px solid pink; background:lightblue; margin:5px 0px; border-radius:3px; } </style> </head> <body> <div class="container"> <div class="a"> Lore </div> <div class="a"> Lore </div> <div class="b"> Lore </div> <div class="a"> Lore </div> <div class="a"> Lore </div> <div class="a"> Lore </div> <div class="b"> Lore </div> <div class="a"> Lore </div> <div class="b"> Lore </div> <div class="a"> Lore </div> <div class="a"> Lore </div> </div> </body> </html>