Exercise 9.6

This is Exercise #9.6, 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 familiar with how we assign items to grid regions.

Instructions

Start with this document as the template. Arrange the provided elements within a grid according to the necessary layout. Don't change the HTML elements, make the changes with CSS style only!

Arrange the grid items below to match a brick wall pattern. Each full brick should be 200px wide and 100px high, including the padding and border. This is how the final result should look:

Reference image - HTML elements laid out in a brick-wall pattern

Extra challenge

For an extra challenge: center the text vertically within the bricks! The result of extra challenge looks like this:

Reference image - HTML elements laid out in a brick-wall pattern, text vertically centered

Here is the grid you should work with (remember: apply CSS style only, within the <style> block in the <head> of the document):

!
lo
Hel
W
ld
or

Solution

You can find a solution in here.