D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
mattborn
Full window
Github gist
Adaptive Flexbox for Sid
<!doctype html> <html> <head> <title>Adaptive Flexbox for Sid</title> <style> body { margin: 5%; } img { max-width: 100%; } .Album-Details { display: flex; flex-wrap: wrap; padding: 5%; } .Album, .Details { flex: 1 0 400px; } </style> </head> <body> <div class="Album-Details"> <div class="Album"> <img src="//placebear.com/1500/1500"> </div> <div class="Details"> <div>1</div> <div>Album Title</div> <div>Album Description</div> <div><a href="#">Spotify</a> <a href="#">iTunes</a></div> </div> </div> <div class="Album-Details"> <div class="Album"> <img src="//placebear.com/1500/1500"> </div> <div class="Details"> <div>1</div> <div>Album Title</div> <div>Album Description</div> <div><a href="#">Spotify</a> <a href="#">iTunes</a></div> </div> </div> <div class="Album-Details"> <div class="Album"> <img src="//placebear.com/1500/1500"> </div> <div class="Details"> <div>1</div> <div>Album Title</div> <div>Album Description</div> <div><a href="#">Spotify</a> <a href="#">iTunes</a></div> </div> </div> <div class="Album-Details"> <div class="Album"> <img src="//placebear.com/1500/1500"> </div> <div class="Details"> <div>1</div> <div>Album Title</div> <div>Album Description</div> <div><a href="#">Spotify</a> <a href="#">iTunes</a></div> </div> </div> <div class="Album-Details"> <div class="Album"> <img src="//placebear.com/1500/1500"> </div> <div class="Details"> <div>1</div> <div>Album Title</div> <div>Album Description</div> <div><a href="#">Spotify</a> <a href="#">iTunes</a></div> </div> </div> <div class="Album-Details"> <div class="Album"> <img src="//placebear.com/1500/1500"> </div> <div class="Details"> <div>1</div> <div>Album Title</div> <div>Album Description</div> <div><a href="#">Spotify</a> <a href="#">iTunes</a></div> </div> </div> <div class="Album-Details"> <div class="Album"> <img src="//placebear.com/1500/1500"> </div> <div class="Details"> <div>1</div> <div>Album Title</div> <div>Album Description</div> <div><a href="#">Spotify</a> <a href="#">iTunes</a></div> </div> </div> <div class="Album-Details"> <div class="Album"> <img src="//placebear.com/1500/1500"> </div> <div class="Details"> <div>1</div> <div>Album Title</div> <div>Album Description</div> <div><a href="#">Spotify</a> <a href="#">iTunes</a></div> </div> </div> <div class="Album-Details"> <div class="Album"> <img src="//placebear.com/1500/1500"> </div> <div class="Details"> <div>1</div> <div>Album Title</div> <div>Album Description</div> <div><a href="#">Spotify</a> <a href="#">iTunes</a></div> </div> </div> <div class="Album-Details"> <div class="Album"> <img src="//placebear.com/1500/1500"> </div> <div class="Details"> <div>1</div> <div>Album Title</div> <div>Album Description</div> <div><a href="#">Spotify</a> <a href="#">iTunes</a></div> </div> </div> </body> </html>