D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
playwellsteve
Full window
Github gist
JS Bin// source http://jsbin.com/wefecagavi
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> <style id="jsbin-css"> .grid { border: 3px solid black; } .grid_row { display: flex; } .grid_col { flex: 1; border: 1px solid grey; border-right: 2px solid black; } .grid_col:nth-child(2) { flex: 3; } .grid_col:nth-child(3) { border-right: 1px solid grey; } .grid_col .grid_row .grid_col { border-right: none; border-left: none; border-bottom: none; } .grid_col .grid_row .grid_col:nth-child(2) { border-left: 1px solid grey; } </style> </head> <body> <div class="grid"> <div class="grid_row"> <div class="grid_col">Title</div> <div class="grid_col"> <div class="grid_row> <div class="grid_row"> domr</div> <div class="grid_row"> <div class="grid_col">Type</div> <div class="grid_col">Program</div> </div> <div class="grid_row"> <div class="grid_col">Warmups</div> <div class="grid_col">Projects 1</div> </div> </div> <div class="grid_col"> <div class="grid_row">Characters</div> <div class="grid_row">Setting</div> <div class="grid_row">Projects 2</div> </div> </div> </div> <script id="jsbin-source-css" type="text/css">.grid { border: 3px solid black; } .grid_row { display: flex; } .grid_col { flex: 1; border: 1px solid grey; border-right: 2px solid black; } .grid_col:nth-child(2) { flex: 3; } .grid_col:nth-child(3) { border-right: 1px solid grey; } .grid_col .grid_row .grid_col { border-right: none; border-left: none; border-bottom: none; } .grid_col .grid_row .grid_col:nth-child(2) { border-left: 1px solid grey; }</script> </body> </html>