Exercise 9.5

This is Exercise #9.5, 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 get started with the Grid layout.

Instructions

Start with this document as the template. Arrange the provided elements in a grid according to the following specification:

  1. You should be able to solve the exercise by simply creating CSS style for the grid container (div with id="main-grid"), nothing else.
  2. The first row must be 200px high, the third row must be 100px high. The second row should be flexible - fill the whole available height. Note: the whole grid should fit the whole parent container (see the dashed light-blue border).
  3. The first column must be 200px wide while the second column should fill the whole available width.

This is how the end result should look:

Image with a solution of this exercise

The following CSS properties may be handy:


        display: grid;
        grid-template-rows
        grid-template-columns

Template

Use this file as the template.

Here is the grid:

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Solution

You can find a solution in here.