Project 3

The Grid


Using the CSS grid, you will create a simple, responsive image gallery. You will only need a single HTML page and a single CSS page. Your image gallery will include at least 20 distinct images (see assets, below). I suggest spending a few minutes and assembling an assets folder that you can use as you build out this project. Note that I’ve included a ready-to-use collection of images (below): You may use those while you are building and testing your site, but your Project Three must use different images than the ones I provide.


I’ll share three tutorials related to this project between this PM and tomorrow afternoon. The third of those tutorials will walk you step by step through the process of building this page. While I encourage you to embroider on the framework we build in that third tutorial, and customize things to suit you, it is enough for this final project that you follow those instructions exactly and deliver that product as your final project.

The final Project is due Monday, 25 January, at 9AM. Note that the next semester starts the same day.

In addition to those three grid-related tutorials, there are several miscellaneous short videos that I’ll upload tomorrow and Friday; they are not required viewing, but much of the material covered therein is worth knowing about.

Requirements: Assets

In my demo version, I’ve used album cover art, mainly because album covers are ready-to-go art in a square format. For this Project, you’ll need square art: You don’t have to use album cover art – you can use family photos, personal photos, random photos; you can use square images from an exhibit of mid-twentieth century typefaces, holstein cows, Babylonian statuary, or photos of flowers. Or anything else. As long as its square.

In collecting the images, there are several requirements to bear in mind:

  1. The images must all be square;
  2. Each image is at least 300px on a side;
  3. Each image is at most 1000px on a side;
  4. They may be jpg, jpeg, or png;
  5. They should not be gif, tiff, bmp, or other formats;
  6. They should not be visibly pixelated;
  7. They should have no border: The image/art should extend all the way to the edge;
  8. Among your twenty files, there should be no repeated images;

At the bottom of this page, I’ve included some suggestions about where to hunt for album art of your own if you care to do so. You can use the files I collected as a placeholder for your own images for now, but you will have to replace my images with your own before you hand in the Project.

In spite of the seeming complexity, this project is fairly compact. Your HTML will be short: Probably not more than 50 lines (including comments). My CSS on this demo is 40 lines long, and many of those lines are comments.

Requirements Part One

Your webpage is chiefly a single CSS grid. Using a CSS grid, you will build a simple layout logic that makes it possible for your site to:

  1. rearrange itself, and resize its contents, to ensure that web browser windows from 360px wide to over 1600px wide can present your art without distortion;
  2. prevent horizontal scrolling. At no point will it be necessary for a visitor to scroll horizontally to see any images (or any part of an image);
  3. change the size of the art in proportion to the screen (where necessary);
  4. change the number of images per row (where necessary);
  5. ensure that only whole images are visible on the topmost row;
  6. ensure that the spacing between rows and columns changes remains uniform throughout the page.

Watch the first half of video below (from 0:00 to approximately 1:01) in order better to understand your goal in this first part of the Project.

Requirements Part Two

To take advantage of more of what the grid has to offer, your HTML and CSS should allow us to easily specify that any particular image in your grid should be either a single row tall and a single row wide; two rows tall / two rows wide; or three rows tall, three rows wide. Those sound like huge and complicated changes, but once we’ve added the couple of lines of logic that are necessary, it is a snap.

For example, here’s a snippet of my HTML when all the images appeared as 1x1 cells on the grid:

<div><img src="assets/bowie.jpg" alt="Bowie album"></div>
<div><img src="assets/st-vincent.jpg" alt="StVincent"></div>

And here’s all I had to do to the HTML to make the first image two cells wide and two cells high (“large”), and then to make the second image three cells wide by three cells high (“XL”):

<div class="large"><img src="assets/bowie.jpg" alt="Bowie album"></div>
<div class="XL"><img src="assets/st-vincent.jpg" alt="StVincent"></div>

When I render your project in my browser, I should see 1x1, 2x2, and 3x3 square images in your grid, and when I change the dimensions of my browser window, your webpage should be able to accommodate those changes, automatically reflowing the layout so that the 1x1 images fill any open spaces.

To see that in action, watch this video STARTING FROM THE 1:02 MARK.


That’s it. I’ll post the first of three quick tutorials this evening, and then upload the two other parts tomorrow. Again, let me emphasize this: This final project is really very straightforward: It may be impossible for you to imagine how something as clunky as CSS can make this happen fairly easily, but that’s why CSS grid is such a welcomed new feature of CSS3. It finally starts to make good on the early promise of CSS and HTML: To separate form from content, and ensure that a wide variety of visitors see a site that looks custom-designed for their screen.

Assets / placeholders

Download this sample album art asset pack

Extra: Finding Album Art

If you’re going to have to do work like this, you might as well make use of art that you find personally interesting. That’s not a requirement, but it certainly makes the effort a bit more interesting.

Note that you may need to load many of your files into Photoshop, etc., in order to resize them, trim off blank margins, and so on. All of the images you use need to be of a single uniform size.

Possible Album Art Image Sources

  • Your own music collection (mp3, aac, et al. store jpgs either in the music file itself or as a sidecar);
  • great resource, but without registering, you’ll get an ugly watermark on your album, and their registration process seems broken;
  • Sometimes the sizes are unpredictable;
  • Google image search. Usually pretty reliable.