HTML CSS examples for CSS Widget:Div Table
Using grid-template-columns to create table with div
<html lang="en"> <head> <title>Auto-placement and the order property</title> <style> body {<!--from www . j av a2 s . c o m--> margin:41px; } .box { background-color:Chartreuse; color:yellow; border-radius:6px; padding:21px; font-size:151%; order:2; } .box:nth-child(even) { background-color:blue; color:pink; } .wrapper { width:601px; display:grid; grid-template-columns:repeat(7, 100px); grid-gap:11px; } .box1 { order:4; } .box2 { order:3; } </style> </head> <body translate="no"> <div class="wrapper"> <div class="box box1"> 1 </div> <div class="box box2"> 2 </div> <div class="box box3"> 3 </div> <div class="box box4"> 4 </div> <div class="box box5"> 5 </div> <div class="box box6"> 6 </div> <div class="box box7"> 7 </div> <div class="box box8"> 8 </div> <div class="box box9"> 9 </div> <div class="box box10"> 10 </div> <div class="box box11"> 11 </div> <div class="box box12"> 12 </div> </div> </body> </html>