#053: Responsive Columns for the Gallery

(Updated on )

We add in some responsiveness to the grid we have set up for the Gallery. At the widest screens, we have it set at four columns. Then we start adding in breakpoints via our super easy @mixins we have set up and have been re-using all over.

At our mama-bear breakpoint we go down to 3 columns, then we make an interim breakpoint in between mama-bear and baby-bear where it breaks into 2 columns, then ultimately 1 column at baby-bear. This is super easy, as all we need to do is adjust how many columns we set via CSS3 column-count.

We end the video talking about future goals for the gallery. It would be nice to be able to load different number of images on different screen sizes and use actual thumbnails instead of full size images. Perhaps one day we’ll get there.

For the record, the software I am using locally to capture screenshots and upload them to the server via FTP is LittleSnapper.