punkfairie/odin-css-exercises
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
odin-css-exercises/grid/02-grid-layout-2
History
Daniel Murphy 34328795e3 Add solution.css to solution folder
2022-01-06 13:14:01 -05:00
..
solution Add solution.css to solution folder 2022-01-06 13:14:01 -05:00
desired-outcome-narrow.png Add desired outcome images to folder with links in README.md 2022-01-06 13:05:27 -05:00
desired-outcome-wide.png Add desired outcome images to folder with links in README.md 2022-01-06 13:05:27 -05:00
index.html Add initial index.html 2022-01-06 13:10:30 -05:00
README.md Add desired outcome images to folder with links in README.md 2022-01-06 13:05:27 -05:00
style.css Add initial style.css 2022-01-06 13:13:02 -05:00

README.md

Responsive Holy Grail Layout with Grid

This one is easy! We are going to take our Holy Grail Layout from the first exercise and make it responsive. To do this we will simply change our fixed track sizes to be dynamic. Consider this a warmup for the next exercise and make sure your layout is responding properly when resizing the window.

Hints

  • You only need to add to the CSS selectors
  • Use dynamic track sizes for your columns and rows

Desired Outcome

When the browser is narrow:

desired outcome narrow

When the browser is stretched wide:

desired outcome wide

Self Check