Temple Naylor Temple Naylor - 1 month ago 8
CSS Question

How should I approach building a picture only portfolio?

I love these following portfolios:

http://www.ericryananderson.com/

http://jeremycowart.com/portfolio/featured/

I wanted to create a website with the same concept of a collage of photos connecting together. But I am not sure the best way to approach this, would I just use box-sizing and floats? Or would bootstrap make this project easier? Thank you for your help!

Edit: I was told in order to do this, photoshop would be the best method, but I would like to complete this with just programming if possible.

Answer

I don't think it's possible to achieve this with purely CSS, correct me if I am wrong.

For that kind of thing I usually use isotope (http://isotope.metafizzy.co/), it has a setting called "masonry" that absolutely positions the images like that. The http://jeremycowart.com/ one you linked up there also uses isotope.

If you wanted to go strictly with CSS all I could think of would be setting four columns and then stacking the images inside. Kind of like this https://jsfiddle.net/x74rbraa/

<div class="container">

<div class="col">
  <div class="box box--portrait">
  </div>
  <div class="box box--portrait">
  </div>
  <div class="box box--landscape">
  </div>
</div>
<div class="col">
  <div class="box box--landscape">
  </div>
  <div class="box box--portrait">
  </div>
  <div class="box box--landscape">
  </div>
</div>

That wouldn't be very mobile friendly, though. And you'd have to do the sorting/ordering in the code that generates your columns. For example iterate over all entries you want to show, save them in an array, split the array in multiple smaller arrays and put their contents in one col each.