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.
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.
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.
- Four rows, five columns
- First column is 300px, other columns vary with browser width
- Seven rows, three columns
- First and last columns are 300px, other columns vary with browser width.
- Three rows, seven columns. First row 3x the size of other rows.
- Three rows, seven columns. First item in row 1 covers four columns
- Three rows, seven columns. Last item in row 1 covers four columns
- First item in row 1 covers four rows
- First item in row 1 covers four rows and two columns
- Item number 1 appears at the end of row 2.
- Item number 1 takes up two rows and two columns from the right edge of the wrapper.
- Item number 1 takes up three columns in the middle of the entire wrapper.
- Remember: no changes to the HTML.
- 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.
- 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()
- 4 rows, 5 columns.
- Wrapper takes entire width and height of the page.
- Same layout as example 14, but item number is in top right of box.
- Add 1rem of padding, too.
- 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.
- 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.
- Lay it out like in the screenshot.
- 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.