History

Daniel Murphy 08a2d05f5a Add hints and self checks to README.md		2022-01-05 13:44:25 -05:00
..
solution	Fix solution.html href to point to solution.css	2022-01-05 13:27:09 -05:00
README.md	Add hints and self checks to README.md	2022-01-05 13:44:25 -05:00
desired-outcome.png	Add desired outcome image to folder and link in README.md	2022-01-05 12:52:38 -05:00
index.html	Add solution.html to solution folder	2022-01-05 13:20:19 -05:00
style.css	Add initial style.css	2022-01-05 13:24:41 -05:00

README.md

The Holy Grail Layout with Grid

Now it's time to practice the Grid tools we've learned and create a layout that might seem familiar. We're going to make a Holy Grail Layout like the ones we created using Flexbox. The difference here is that we won't be relying on Flexbox for this exercise. We'll only be using Grid. You'll be able to see the benefits of Grid for yourself!

Hints

You only need to add to the CSS selectors
Look back to the Creating a Grid lesson if you forget how to turn an element into a grid
Use fixed track sizes (e.g. pixels) for your columns and rows

Desired Outcome

Self Check

The gap is 15px
The grid has two columns
The grid has four rows
The first column is three times larger than the other
The third row is five times larger than the others
The header and footer elements span across both columns
The sidebar element only spans across the first column
The nav and article elements span across the second column