odin-default-css-exercises/grid/02-grid-layout-2/README.md

# Responsive Holy Grail Layout with Grid

For this exercise, 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 browser 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](./desired-outcome-narrow.png)

When the browser is stretched wide:

![desired outcome wide](./desired-outcome-wide.png)

### Self Check
- The gap is 15px
- The grid has two columns
- The grid has four rows
- The grid tracks do not use static sizes (no pixels!)
- The second column is three times larger than the other
- The third row is five times larger than the others
- The rows and columns stretch wider when making the browser window bigger
- The rows and columns stretch taller when making the browser window smaller
Add second exercise with initial README.md 2022-01-06 17:24:38 +00:00			`# Responsive Holy Grail Layout with Grid`

Change intro in readme.md Remove the wording "It is easy" or "This is easy" from the description. This may be somewhat demotivating to someone who may be having a difficult time with these concepts. 2022-03-25 20:31:19 +00:00			`For this exercise, 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 browser window.`
Add second exercise with initial README.md 2022-01-06 17:24:38 +00:00
			`### Hints`
			`- You only need to add to the CSS selectors`
			`- Use dynamic track sizes for your columns and rows`

			`## Desired Outcome`

Add desired outcome images to folder with links in README.md 2022-01-06 18:05:27 +00:00			`When the browser is narrow:`

			`![desired outcome narrow](./desired-outcome-narrow.png)`

			`When the browser is stretched wide:`

			`![desired outcome wide](./desired-outcome-wide.png)`

Add second exercise with initial README.md 2022-01-06 17:24:38 +00:00			`### Self Check`
Update README.md and add self checks 2022-01-06 18:19:18 +00:00			`- The gap is 15px`
			`- The grid has two columns`
			`- The grid has four rows`
			`- The grid tracks do not use static sizes (no pixels!)`
Update README.md 2022-01-31 04:35:34 +00:00			`- The second column is three times larger than the other`
Update README.md and add self checks 2022-01-06 18:19:18 +00:00			`- The third row is five times larger than the others`
			`- The rows and columns stretch wider when making the browser window bigger`
			`- The rows and columns stretch taller when making the browser window smaller`