Thomas Wallace

Lectures and Resources

CSS Grid Lab

In this exercise we will use the same approach as we used in the positioning lab. Using the same base code we will create four interface patterns using the CSS grid specification.:

Set up

    1. In your workspace create a new project sub-directory named: css-grid-lab
    2. Create 4 html files named:
      1. grid-two-col-left.html
      2. grid-two-col-right.html
      3. grid-two-col-stacked.html
      4. grid-two-col-equal.html
    3. Populate Each File with the starter code located here: Starter Code
    4. Add a nested list to your course homepage with links to each file.

Target Outcomes

Using the sample code provide please use CSS grid to implement the following layouts. There are multiple ways to solve each example but please use only css grid.

grid-two-col-left

grid-two-col-right

grid-two-col-stacked

grid-two-col-equal