Exercise 9.7

This is Exercise #9.7, lecture on CSS Grid, used in the course IDATA2301 Web technologies at NTNU, campus Aalesund.

Go back to exercise list.

Purpose

The purpose of the exercise is to practice using grid in realistic layouts. Holy grail is a classic layout, many web pages use some form of it. Here is an example of a holy grail layout:

Holy grail layout example

Instructions

Take the Holy Grail layout you created with Flexbox (exercise 9.4), and re-create it using CSS Grid. You may need to do some HTML changes as well (Hint: all the areas must be direct child of grid, including nav, main and ads).

Solution

You can find a solution here.