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.

I wonder if some of the jittery-ness is because images are inline. I know the divs are inline-block, but maybe the columns would handle the images better as block elements? Just kind of because how columns handle inline stuff.

Chris, there are two apps in your dock that I’m not familiar with, and I just can’t figure it out. I believe I’ve labeled the rest of these correctly? :) I am loving the videos, and I like learning more about the different apps you use.

We have a pretty good* newsletter.

Email Address

CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans Pro and Source Code Pro. It is made possible through sponsorships from products and services we like.