Lessons > Tutorial 4. 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

Please see Lecture 8 for more examples and resources.

Your Tasks

1. Create the three layouts shown below

Please download the tutorial files and save them inside of your tutorials folder in a folder called tutorials04. Your cs130 directory should look something like this:

cs130
├── index.html
├── style.css
├── homework
├── lectures
│   ├── lecture02
│   ├── lecture04
│   ├── lecture07
│   └── lecture08
└── tutorials
    ├── tutorial01
    └── tutorial04
        ├── hints
        ├── index.html
        └── style.css

When you’re done, 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.

2. Update your homepage to link to your tutorial04

Please update your index.html page from last week’s tutorial so that it links to your completed Tutorial 4 assignment. See Sarah’s example homepage.

Checklist

Please make sure that you have completed the following:

• Implemented desktop layout using CSS Grid
• Implemented tablet layout using CSS Grid
• Implemented mobile layout using CSS Grid
• Your homepage (from Tutorial 3) links to your completed tutorials/tutorial04/index.html webpage.
• Everything committed to GitHub (stage, commit, and sync).

What to turn in

Paste a link to your GitHub pages homepage on Canvas under the Tutorial 4 assignment.