DLozanoC / layout-practice

Layout Practice Exercise

In this exercise you will take an existing site and apply Grid & Flexbox to it to lay the content out in a readable and modern manner.

Step 1: Livecode

Your instructor will demonstrate how to lay out the navigation menu using the Grid and Flexbox systems.

Step 2: Team Practice

In teams of 3-4, you will style the given site to create a modern, readable, and functional layout.

You should:

• Use at least one Flex Container
• Use at least one Grid Container

There is an existing css class called "grid" which suggests a candidate for a grid container.

The footer and top menu also make great candidates for use as Flex Containers.

Sample Solution

You can see one solution for this on CodeSandbox.

Taken from an existing sanbox.