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 2aa64cfd68 Add desired outcome images to folder with links in README.md
2022-01-06 13:05:27 -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
README.md Add desired outcome images to folder with links in README.md 2022-01-06 13:05:27 -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