CSS Grid “Layouts in Abstract” Exercise

First, download the required  files. 

Using Firefox for your browser will allow you to use its Layout tab in its Inspector. If you’re at Langara, use the Firefox Developers Edition.

The task:

In the files you download is a grid-starter-template.html file. For each layout you are to build, duplicate and rename to reflect the layout you need to build.

There is a stylesheet called common-styles.html which just removes the dots on the list and does some basic formatting.

Put your styles for each exercise in the <style> area at the top of HTML.

Do the exercises in sequence: some build on what’s done in the previous exercise.


Example 1: 

Four rows, five columns.

  • Columns take all available space (i.e. between the BODY margins).
  • Font size determines height of rows
  • 1em space between items.

Example 2

  • Four rows, five columns
  • First column is 300px, other columns vary with browser width

Example 3

  • Seven rows, three columns
  • First and last columns are 300px, other columns vary with browser width.

Example 4

  • Three rows, seven columns. First row 3x the size of other rows.

Example 5

  • Three rows, seven columns. First item in row 1 covers four columns

Example 6

  • Three rows, seven columns. Last item in row 1 covers four columns

Example 7

  • First item in row 1 covers four rows

Example 8

  • First item in row 1 covers four rows and two columns

Example 9

  • Item number 1 appears at the end of row 2.

Example 10

  • Item number 1 takes up two rows and two columns from the right edge of the wrapper.

Example 11

  • Item number 1 takes up three columns in the middle of the entire wrapper.
  • Remember: no changes to the HTML.

Example 12

  • 3 columns, equal width.
  • 7 rows. Row 2 is 1/2 the height of row 1, and 1/3 the height of row 3.
  • That pattern continues with rows 4,5, & 6.
  • But the last row does not continue the pattern: the only thing determining its height will be the content itself.

Example 13

  • Two screenshots (one hanging off the edge)
  • Four columns. Each each an equal width, but each one never gets smaller than 200px. It can get bigger, however.
  • Hint: requires minmax()

Example 14

  • 4 rows, 5 columns.
  • Wrapper takes entire width and height of the page.

Example 15

  • Same layout as example 14, but item number is in top right of box.
  • Add 1rem of padding, too.

Example 16

  • Same layout as example 15, but text is in the horizontal and vertical center of the box



For layouts 20 – 23, use the file poem.html as your starting point.

Example 20

  • Style it like in the screenshot. Don’t worry that the text is different than in the screenshot.
  • Divide the items up such that they cover the entire page.
  • Make the number be in the top left corner and the text be in the bottom left corner.

Example 21

  • Lay it out like in the screenshot.

Example 22

  • Layout it out like in the screenshot
  • Modify the design so that the item number has a light background related to item background.
  • Have the number text centered vertically and horizontally in its box.