Assignment: Multi-Column Layout

The goal of this assignment is to build a two column layout using CSS Grid with named areas. Here are the requirements:

• Content should be sourced from either

  1. copyright free material like Gutenberg with link to source
  2. any kind of lorem ipsum (try googling for beer ipsum or "meettheipsums")
  3. bring your own (indicated somewhere in the document as well)

• Page layout

  Create a complete single page with header and footer based around the content. If there are any images, be sure they're copyright free, or use your own.

  The page layout can either run full bleed (to the edges of the viewport), or be contained and centered. Either way, the main body text should be contained to a reasonable line length for reading.

  The layout does not need to fully scale from mobile to large desktop. All you need is a layout that works on desktop/laptop sized screens.

  @supports and @media are not required.

• Grid

  Use CSS Grid named areas for the major page components. Create a semi-flexible layout with at least two columns.

  Grid templates with named areas are described on the Grid Templates and Item Placement page and used in the multi-column demo.

  Your grid-template-columns can be any combination of widths (15rem 1fr, 1fr 4fr, etc).

Compared to the multi-column layout demo, your layout and code while most likely be shorter and simpler. Because of this, don't start with my demo code and replace the text or try to adapt it. The demo has a lot of code that's specific to its content. Create your own from scratch and refer to the demo as needed. It may seem like more work up front, but ultimately it will be easier and better.