Lessons > Tutorial 3. CSS Grid & Media Queries

Download Tutorial Files

CSS is notoriously a nightmare – particularly when it comes to layouts. As an effort to provide some guidance re: using some more modern techniques for layout, the course staff and I have created a basic CSS tutorial, where multiple layouts can be easily supported using CSS Grid – the latest in a long line of strategies for simplifying layouts.

Background

There are many different ways to use CSS grid to make a layout. In this tutorial, we will follow an approach that involves:

1. Setting up columns and rows using the grid-template-columns and grid-template-rows properties.
2. Naming the regions of your grid using the grid-template-areas property.
3. Assigning different elements to different regions of your grid using the grid-area property.
4. Creating margins in your grid using the grid-row-gap and grid-column-gap properties.
5. Scaling your columns flexibly using “fractional units” (fr). For more info on the fr unit, see the CSS units page.

For instance, the following code uses these properties to generate the layout pictured right:

CodePen

See the Pen CSS Grid by Sarah (@vanwars) on CodePen.

References

The CSS Tricks: “A Complete Guide to Grid” tutorial is great tutorial will essentially walk you through some of the key idea of today’s lab. In addition, there are some resources on the course website that also cover relevant ideas:

• CSS Grid
• Media Queries

Instructions

Please download the tutorial files and implement the three layouts below using CSS Grid. You should use the same stylesheet for all three views. Your TA will help you get started and walk you through one way of defining CSS Grids.

What to turn in

To submit this week’s Tutorial assignment, please do the following:

1. Save all of your Tutorial 3 files in a folder called tutorial03
2. Add your tutorial03 folder to your git repository, commit them, and push them to github. Your commands should look something like this:

$ git add tutorial03
$ git commit -am "Checking in my tutorial03 folder"
$ git push

When you’re done, paste a link to your tutorial03 GitHub pages on Canvas under the Tutorial 3 assignment.